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: stackoverflow.com/questions/11001817/… Hope it helps — Carlos Araya
– Carlos Araya, Commented Dec 16, 2016 at 8:38

num8er · Accepted Answer · 2017-08-20 11:31:52Z

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, 2017 at 11:31

answered Sep 20, 2015 at 19:50

num8er

19.5k4 gold badges50 silver badges61 bronze badges

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

6 Comments

XAE Over a year ago

Can you explain to me what was I doing wrong and why this works?

num8er Over a year ago

cors module does the same as You, but You've not defined most of rules. You can read it here: github.com/expressjs/cors/blob/master/lib/index.js

num8er Over a year ago

or to check: open chrome and investigate header that cors module sends and write same headers to Your code and remove cors module.

Carlos Araya Over a year ago

This answer does not help at all. BTW, - Try this: npm install cors --save ... cors = require('cors') - Are you serious?

num8er Over a year ago

My example is common basic solution. Quick (dirty) solution. It depends on what's Your problem is.

|

Ma Kobi · Accepted Answer · 2017-01-31 14:43:56Z

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.

Collectives™ on Stack Overflow

CORS - http OPTIONS error with Angular and Express

2 Answers 2

6 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Linked

Related