cannot set proxy on node.js

Question

I have node.js 4.1.1 and express.js 4.8.5 on port 5550. I also have Geoserver 2.8.0 on port 8080. Both servers are on the same laptop.

An app on node wants to access some map data from Geoserver and these are the details on openlayers

 source: new ol.source.TileWMS({
      url: 'http://localhost:8080/geoserver/mymap/wms?',
      crossOrigin: 'anonymous',
// I also tried  crossOrigin: 'localhost:8080/' and crossOrigin: 'localhost:5550/' but nothing

       params: {'LAYERS': 'mymap:layer, mymap:anotherLayer, FORMAT': 'image/png' ,'CRS': 'EPSG:3857'},
       serverType: 'geoserver'

Setting CORS or proxy on Geoserver is not possible cause of technical problems (old Jetty core, hack-ish solutions on the wild, unavailiable jars for old Jetty version). To avoid CORS and Access Control Allow Origins errors I want to set a proxy on Node. I just want to use Node because its easier to set.

According to this and a previous question here I have to set a reverse proxy, so

I do not do proxy configs on the client
Geoserver gets served via a Node reverse proxy, so looks like they have the same origin (=no more CORS problems)
client want to access Geoserver but does that via Node without knowing it

I guess I got the concept right, but I dont know how to implement this. I chose the http-proxy-middleware to do this. I added on my app.js

var proxyMiddleware = require('http-proxy-middleware'); 

    var proxy = proxyMiddleware('http://localhost:8080/geoserver', {
                    target: 'http://localhost:5550',
                    changeOrigin: true   
                });

var app = express();

app.use('/' , function (req, res) {
       res.render('index', { title: 'testing', head: 'Welcome Testing Area'});
    });

app.use(proxy); 
app.listen(5550);

On console I see [HPM] Proxy created: /geoserver -> http://localhost:5550

But I still get the error Image from origin 'http://localhost:8080' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5550' is therefore not allowed access. The response had HTTP status code 404.

I fail to understand how to implement this. Please point out my errors or if I did not get the concept right. Please help me understand.

Thanks

UPDATE

These are the headers I see when I open the browser's console

General
Remote Address:[::1]:8080
Request URL:http://localhost:8080/geoserver/mymap/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS=mymap%3Aplanet_osm_polygon%2C%20mymap%3Aplanet_osm_line%2C%20mymap%3Aplanet_osm_roads%2C%20mymap%3Aplanet_osm_point&TILED=true&CRS=EPSG%3A3857&WIDTH=256&HEIGHT=256&STYLES=&BBOX=2269873.9919565953%2C4618019.500877209%2C2348145.508920616%2C4696291.017841229
Request Method:GET
Status Code:404 Not Found

Response Headers
HTTP/1.1 404 Not Found
Content-Type: text/html; charset=iso-8859-1
Content-Length: 1408
Server: Jetty(6.1.8)

Request Headers
Accept:image/webp,image/*,*/*;q=0.8
Accept-Encoding:gzip, deflate, sdch
Accept-Language:el-GR,el;q=0.8,en;q=0.6
Cache-Control:max-age=0
Connection:keep-alive
Host:localhost:8080
Origin:http://localhost:5550
Referer:http://localhost:5550/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36

Similar question here: gis.stackexchange.com/questions/4323/… I need some time to try out the reverse proxy with nodejs. — inf3rno
– inf3rno, Commented Oct 5, 2015 at 17:04
You should use a different proxy lib: stackoverflow.com/questions/22889417/… they have over 1000 stars, while your lib only around 25 stars... There is some tutorial here about one of the libs: blog.ccare.me/blog/2013/09/18/… Try it out! — inf3rno
– inf3rno, Commented Oct 5, 2015 at 17:12

chimurai · Accepted Answer · 2015-10-07 13:15:24Z

2

Looks like you misconfigured the proxy.

mix usage of the normal proxy configuration and the shorthand configuration
target should be the Geoserver, instead of your express server.

Normal syntax with Geoserver as target:

var proxy = proxyMiddleware('/geoserver', {
                 target: 'http://localhost:8080',
                 changeOrigin: true   
            });

Or with the shorthand syntax:

This configuration behaves exactly as the previous one.

var proxy = proxyMiddleware('http://localhost:8080/geoserver', {
                 changeOrigin: true   
            });

edited Oct 7, 2015 at 13:15

answered Oct 5, 2015 at 19:18

chimurai

1,4131 gold badge17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

slevin Over a year ago

I did what you said, but still nothing.

chimurai Over a year ago

Can you provide the requests made to the server and their response codes?

slevin Over a year ago

You mean open the browser's console and copy/paste the Response Headers and Request Headers? This will give the info you want?

inf3rno Over a year ago

@chimurai The geoserver is on 8080 port, the webapp is on 5550 and he wants to proxy the geoserver under a 5550 subfolder.

chimurai Over a year ago

Think I see another configuration mistake. target should be the geoserver instead of the express server. ` var proxy = proxyMiddleware('/geoserver', { target: 'localhost:8080', changeOrigin: true }); `

|

slevin · Accepted Answer · 2015-10-07 22:28:20Z

chimurai was right. What finally worked for me was setting the http-proxy-middleware

On my app.js I now have

var proxyMiddleware = require('http-proxy-middleware'); 

var proxy = proxyMiddleware('http://localhost:5550', {
                 target: 'http://localhost:8080',
                 changeOrigin: true,
                 xfwd: true
            });

/*
the above can be replaced by chimurai's version : 
var proxy = proxyMiddleware('/geoserver', {
                 target: 'http://localhost:8080',
                 changeOrigin: true   
            });
and will still work
*/

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());

app.use(express.static(path.join(__dirname, 'public')));

app.use('/', function(req, res, next) {
    httpProxy.createProxyServer({target:'http://localhost:8080'});
    next();
});

app.use(proxy);

app.listen(5550);

I erased this crossOrigin: 'anonymous', in my Openlayers code and I fixed a typo on the link in the Openlayers and now works fine.

I also tried to fix this via setting a proxy on Geoserver, but this is not possible because Geoserver runs an old Jetty version that is now EOL, so there is no official solution to proxying Geoserver nor upgrading it.

Troubleshooting this via Node is the best solution

Collectives™ on Stack Overflow

cannot set proxy on node.js

2 Answers 2

15 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

15 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related