CORS - http OPTIONS error with Angular and Express

问题:

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

回答1:

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

回答2:

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.