Allow CORS REST request to Express / Node.js application on Heroku

Question

I wrote a REST API in the express framework for node.js, which works for requests from the js console in Chrome, as well as in the URL bar, etc. Now I'm trying to get it to work for requests from another app, in a different domain (CORS).

The first request made automatically by the front end of javascript is / api / search? uri = and doesn't seem to work in the OPTIONS request "preflight".

In my express application, I add CORS headers using:

var allowCrossDomain = function(req, res, next) { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS'); res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With'); // intercept OPTIONS method if ('OPTIONS' == req.method) { res.send(200); } else { next(); } }; 

and

 app.configure(function () { app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(app.router); app.use(allowCrossDomain); app.use(express.static(path.join(application_root, "public"))); app.use(express.errorHandler({ dumpExceptions: true, showStack: true })); }); 

From the Chrome console, I get the following headers:

Request URL: http://furious-night-5419.herokuapp.com/api/search? uri = http% 3A% 2F% 2Flocalhost% 3A5000% 2Fcollections% 2F1% 2Fdocuments% 2F1

Request Method: OPTIONS

Status Code: 200 OK

Request header

 Accept:*/* Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3 Accept-Encoding:gzip,deflate,sdch Accept-Language:en-US,en;q=0.8 Access-Control-Request-Headers:origin, x-annotator-auth-token, accept Access-Control-Request-Method:GET Connection:keep-alive Host:furious-night-5419.herokuapp.com Origin:http://localhost:5000 Referer:http://localhost:5000/collections/1/documents/1 User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.56 Safari/536.5 

Query String Parameters

 uri:http://localhost:5000/collections/1/documents/1 

Answer Headers

 Allow:GET Connection:keep-alive Content-Length:3 Content-Type:text/html; charset=utf-8 X-Powered-By:Express 

Is this like missing the correct headers sent by the API application?

Thank.

Answer 1

I read your code in a clean ExpressJS application and it works great.

Try moving app.use(allowCrossDomain) to the top of the configure function.

Answer 2

to support cookies with Credentials you need this line xhr.withCredentials = true;

mdn docs xhr.withCredentials

In Express Server, add this block in front of all the others.

 `app.all('*', function(req, res, next) { var origin = req.get('origin'); res.header('Access-Control-Allow-Origin', origin); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header('Access-Control-Allow-Headers', 'Content-Type'); next(); });` 

Answer 3

It may not be that most people are looking at this question, but I had the same problem and the solution was not related to CORS .

It turns out that the secret JSON Web string token was not defined in the environment variables, so the token cannot be signed. This triggered any POST request that relied on a token verification or signature to get a timeout and return a 503 error, telling the browser that something was wrong with CORS , that it wasn’t. Adding an environment variable to Heroku solved the problem.

I hope this helps someone.

Answer 4

I add this as an answer only because the original post was added as a comment, and as such it was missed by your first ones when I first visited this page.

As @ConnorLeech notes in his comment on the accepted answer above, there is a very convenient npm package, which, oddly enough, is called cors . Its use is as simple as var cors = require('cors'); app.use(cors()); var cors = require('cors'); app.use(cors()); var cors = require('cors'); app.use(cors()); (again, borrowed from Mr. Leach’s answer) and can also be applied in a more rigorous and customizable way, as indicated in their documents .

It is also worth noting that the initial comment to which I refer above was made in 2014. Now is the year 2019, and looking at the github page of the npm package, the repo was updated just nine days ago.