CORS error - http OPTIONS using Angular and Express

Question

I am trying to make a POST for my API from an Angularjs client, I have this configuration on a server that runs in a different 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(); }); 

Headers sent to the server:

 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 

Answer headers:

 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:

 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 

Answer 1

In fact, most browsers for security principles do not allow the client js code to request a resource from the same host.

But this allowed when the owner of the resource tells the client’s browser about his sharing resource, adding the Cross Origin Resource header headers to the response.

In order not to suspect that the headers use the cors package, it will do all the dirty work for you.

 npm install cors --save 

and then:

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

what all:)

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

Answer 2

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

Just wanted to share this for other users with a similar problem when copying and pasting:

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

There is a typo in DELETE .