Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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
like image 265
Nicolás Arévalo Avatar asked Sep 20 '15 19:09

Nicolás Arévalo


People also ask

How do you fix the CORS issue in angular application?

We call this the CORS error. CORS error due to browser's same origin policy. To get around this, you need to tell your browser to enable your client and your server to share resources while being of different origins. In other words, you need to enable cross-origin resource sharing or CORS in your application.

How do you fix CORS origin error?

To get rid of a CORS error, you can download a browser extension like CORS Unblock. The extension appends Access-Control-Allow-Origin: * to every HTTP response when it is enabled. It can also add custom Access-Control-Allow-Origin and Access-Control-Allow-Methods headers to the responses.

What is CORS error in angular?

CORS issue occurs in web application if your backend server (your service) is running on a different domain and it is not configured properly. Note: Even if your backend server is running on a localhost with a different port it is treated as a different domain.


2 Answers

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

like image 99
num8er Avatar answered Oct 14 '22 15:10

num8er


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.

like image 42
Ma Kobi Avatar answered Oct 14 '22 15:10

Ma Kobi