express-http-proxy 仍然被 CORS 策略阻止

Question

I have an express server statically serving my Polymer project. I have a REST API query that I need to make, but if I make it from the client it will be blocked by CORS. So I used express-http-proxy to try to get around that; I send my request to it, and it redirects to the server that has the REST API endpoint on it. This is the entirety of my server code that's running with node server.js :

var express = require('express');
var proxy = require('express-http-proxy');

var server = express();
server.use('/', express.static(__dirname + '/'));
server.listen(8080);
server.use('/rest/api/2/search', proxy('restserver:8877'));
console.log("Server listening on localhost:8080");

When I access restserver:8877/rest/api/2/search in a browser it returns a bunch of json as a 'default' search.

On the client side, I have iron-ajax making this request:

<iron-ajax
            id="getBugs"
            url="/rest/api/2/search"
            params=''
            on-response="handleResponse"
            debounce-duration="300">
        </iron-ajax>

And in the script section, I'm using this.$.getBugs.generateRequest() in the ready function to send the request. So I load this up, expecting the request to not be blocked by CORS, since... it's being proxied by the server. Instead, Chrome devtools gives me this:

XMLHttpRequest cannot load http://restserver:8877/secure/MyJiraHome.jspa. Redirect from 'http://restserver:8877/secure/MyJiraHome.jspa' to 'http://restserver:8877/secure/Dashboard.jspa' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

I don't understand why it's giving me those URLs, since I never reference them, and why it's blocking due to CORS, since it's going from the server, not the client, that being the whole point of the proxy.

Answer 1

It may be that express-http-proxy simply forwards the Origin header coming from your client which is http://localhost:8080 , causing the end server to reject it.

Try modifying it with proxyReqOptDecorator :

server.use('/rest/api/2/search', proxy('restserver:8877', {
  proxyReqOptDecorator(proxyReqOpts) {
    proxyReqOpts.headers['Origin'] = 'http://accepted.origin.com';
    return proxyReqOpts;
  }
}));

Never used express-http-proxy and did not test it tho, so tell me if it's not a solution. Also I think using cors as other people suggested may simplify things a lot. But I don't know your development constraints, so I could be wrong.

Answer 2

Server is probably returning a 302 redirect which is not handled correctly in the used middleware.

Read more how the redirect works: https://en.wikipedia.org/wiki/HTTP_location

You can modify the Location response header to overcome the CORS issue or you can try:

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

var restServerProxy = proxy({target: 'http://restserver:8877', autoRewrite: true});

server.use('/rest/api/2/search', restServerProxy);

The above example should handle redirects automatically.

Answer 3

You don't need any proxy. Since you are calling endpoint on your server, you can just whitelist your client side for calling your server. You can do that with cors package.

https://www.npmjs.com/package/cors

First, define your CORS policy logic in one file (let's name it cors-policy-logic.js ), and then export it so you can use it in other files.

const cors = require('cors');

const whitelist = ['http://localhost:8080', 'http://localhost:your_client_url'];

var corsOptionsDelegate = (req, callback) => {
  var corsOptions;
  if (whitelist.indexOf(req.header('Origin')) !== -1) {
    corsOptions = { origin: true };
  } else {
    corsOptions = { origin: false };
  }
  callback(null, corsOptions);
};

exports.cors = cors();
exports.corsWithOptions = cors(corsOptionsDelegate);

Now, import it and use it anywhere were you define some endpoint:

var express = require('express');
const cors = require('./cors-policy-logic.js');

var server = express();
server.use('/', express.static(__dirname + '/'));
server.listen(8080);

server.route('/rest/api/2/search')
  .options(cors.corsWithOptions, (req, res) => { res.sendStatus(200); })
  .get(cors.cors, (req, res, next) => {
     //Your business logic
  });

console.log("Server listening on localhost:8080");

Answer 4

Alternative solution would be to use http-proxy-middleware as mentioned by @chimurai.

If you want to proxy to an https server to avoid CORS:

const proxy = require('http-proxy-middleware');

app.use('/proxy', proxy({
    pathRewrite: {
       '^/proxy/': '/'
    },
    target: 'https://server.com',
    secure: false
}));

Here secure: false needs to be set to avoid UNABLE_TO_VERIFY_LEAF_SIGNATURE error.