CORS - http OPTIONS error with Angular and Express

Question

I'm trying to make a POST to my API from an Angularjs client, I have this configuration on the server which is running in another domain:

app.use(function(req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, OPTIONS, DETELE');
  res.setHeader('Access-Control-Allow-Headers', '*');
  next();
});

The headers sent to the server are:

OPTIONS /api/authenticate HTTP/1.1
Host: xxxx.herokuapp.com
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://127.0.0.1:5757
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.93 Safari/537.36
Access-Control-Request-Headers: accept, content-type
Accept: */*
Referer: http://127.0.0.1:5757/login
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en,es;q=0.8,gl;q=0.6,pt;q=0.4

The response headers are:

HTTP/1.1 403 Forbidden
Server: Cowboy
Connection: keep-alive
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS, DETELE
Access-Control-Allow-Headers: X-Requested-With,content-type,Authorization
Content-Type: application/json; charset=utf-8
Content-Length: 47
Etag: W/"2f-5f255986"
Date: Sun, 20 Sep 2015 19:26:56 GMT
Via: 1.1 vegur

And what I get in the Chrome console is :

angular.js:9814 OPTIONS http://xxxxx.herokuapp.com/api/authenticate 
XMLHttpRequest cannot load http://xxxx.herokuapp.com/api/authenticate. Response for preflight has invalid HTTP status code 403

Have you tried putting the cors configuration at the very beggining (before bodyParsing, routers, methodOverride, etc.)? have a look here: http://stackoverflow.com/questions/11001817/allow-cors-rest-request-to-a-express-node-js-application-on-heroku Hope it helps — Carlos Araya, Dec 16 '16 at 08:38

num8er · Accepted Answer · 2017-08-20T11:31:52.770

13

In fact most browsers for security principles does not allow clientside js code to request resource out of same host.

But, it's allowed when resource owner tell to client browser that his sharing resource by adding Cross Origin Resource Sharing headers in response.

To not to guess with headers use cors package - it will do all dirty job for You.

npm install cors --save

and then:

var express = require('express')
  , cors = require('cors')
  , app = express();

app.use(cors());

that's all :)

additional docs here: https://www.npmjs.com/package/cors

edited Aug 20 '17 at 11:31

answered Sep 20 '15 at 19:50

num8er

18,604
3
43
57

Can you explain to me what was I doing wrong and why this works? – XAE Sep 20 '15 at 20:05
3

cors module does the same as You, but You've not defined most of rules. You can read it here: https://github.com/expressjs/cors/blob/master/lib/index.js – num8er Sep 20 '15 at 20:06
1

or to check: open chrome and investigate header that cors module sends and write same headers to Your code and remove cors module. – num8er Sep 20 '15 at 20:07
This answer does not help at all. BTW, - Try this: npm install cors --save ... cors = require('cors') - Are you serious? – Carlos Araya Dec 16 '16 at 08:37
My example is common basic solution. Quick (dirty) solution. It depends on what's Your problem is. – num8er Dec 16 '16 at 10:08
@GirishRathod nice! (; – num8er Jun 29 '17 at 13:53

score 1 · Answer 2 · answered Jan 31 '17 at 14:43

I see, that this topic is a little bit older, but I found a little typo in your ACCESS-CONTROL-ALLOW-METHODS.

Just wanted to share this for other users with a similar problem when they copy & paste:

Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS, DETELE

There is a typo in DELETE.

CORS - http OPTIONS error with Angular and Express

2 Answers2

Linked