Trouble with CORS using Eve and AngularJS

Question

I'm developing an app using an API in Eve and AngularJS. To avoid CORS issue, I made a simple NodeJS server to serve my static files. However, even after allowing All domains on my Python Eve API by writing 'X_DOMAINS': '*' (I tested with Curl and it worked) I'm getting issues in my browser when I want to call the API using $http.

This is the error I get in chrome:

XMLHttpRequest cannot load http://localhost:5000/regions. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

I even wrote this in my Node app, even though I figured it would be useless:

app.all('/*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type");
  res.header("Access-Control-Allow-Methods", "GET, POST","PUT");
  next();
});

Nothing has worked so far, thanks in advance for the help!

score 4 · Accepted Answer · answered May 07 '16 at 20:28

4

Ran into some similar issues with javascript. I could get it running with some tweaks on eve, but in the end it was not enough. The BadRequest responses are sent by the flask engine, not eve, disabling any javascript attempt at handling errors. It appears there is a nice flask extension CORS that covers it well:

from flask.ext.cors import CORS
....
CORS(app)

That was all that I needed in the end.

answered May 07 '16 at 20:28

Jeroen

56
1

This worked for me after changing the import from "flask.ext.cors" to "flask_cors". Also, since it wasn't clear to me from this answer, the Eve app.run() command is not replaced by this and still necessary after (at least it was for me). The link you provided was helpful in this. – Wbes Dec 05 '19 at 05:34

score 0 · Answer 2 · edited May 23 '17 at 12:10

Add this in your response headers:

res.header("Access-Control-Allow-Origin", "http://localhost:8080");

Remove the following:

http://localhost:8080

Or what you can try is to get the request origin and add it to the response. Something like this:

var hostName = req.get('host');
res.header("Access-Control-Allow-Origin", hostName);

On some cases it might work, specially if it is a GET call. But if it is a POST, some browsers will block it.

Another option is to disable the web security on your browser, (though not the best thing to do.) You can read here for that.

Also go through the posts here , so that you can have a better idea of the problem.

score 0 · Answer 3 · answered Apr 29 '16 at 16:07

0

In the following command: res.header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type");

you set allowed headers, maybe you sent other headers e.g. "Authorization", in this case you must include these headers to above command

answered Apr 29 '16 at 16:07

sergiy.dragunov

742
6
9

Trouble with CORS using Eve and AngularJS

3 Answers3