19

I'm running a Flask-Restful API locally and sending a POST request containing JSON from a different port. I'm getting the error

No 'Access-Control-Allow-Origin' header is present on the requested resource.

However, when I run

curl --include -X OPTIONS http://localhost:5000/api/comments/3
        --header Access-Control-Request-Method:POST
        --header Access-Control-Request-Headers:Content-Type
        --header Origin:http://localhost:8080

I get

HTTP/1.0 200 OK
Content-Type: text/html; charset=utf-8
Allow: HEAD, GET, POST, OPTIONS
Access-Control-Allow-Origin: http://localhost:8080
Access-Control-Allow-Methods: DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT
Vary: Origin
Access-Control-Allow-Headers: Content-Type
Content-Length: 0

which shows "Access-Control-Allow-Origin" as "*". GET works fine, it's just POST that gives this error. What could be going wrong? If relevant, for the frontend I'm using react and requesting through axios.

sideshowbarker
  • 62,215
  • 21
  • 143
  • 153
hatooku
  • 273
  • 1
  • 2
  • 11

3 Answers3

4

You have to add CORS(app, resources={r"/*": {"origins": "*"}}) into your flask app.

Hope that solves the issue.

porthunt
  • 407
  • 4
  • 11
  • 1
    for more info about CORS see: https://stackabuse.com/single-page-apps-with-vue-js-and-flask-ajax-integration/ – nicolas.f.g Aug 24 '18 at 15:46
  • 4
    thanks, unfortunately also with the added resources it still only works for me for get – wuz Aug 09 '19 at 17:05
2

the Flask-Cors docs explain why this might happen

"When using JSON cross origin, browsers will issue a pre-flight OPTIONS request for POST requests. In order for browsers to allow POST requests with a JSON content type, you must allow the Content-Type header. The simplest way to do this is to simply set the CORS_HEADERS configuration value on your application: e.g."

https://flask-cors.readthedocs.io/en/1.9.0/

app.config['CORS_HEADERS'] = 'Content-Type'
ifeislife
  • 21
  • 1
  • What should you put instead of "content-type" in order to allow browser to run an angular app that is requesting data from the server? – thebeancounter Jan 24 '20 at 12:19
1

In my case, a CORS error raised because of an internal error. An error completely unrelated to CORS, which should return 500, was causing this.

Emre Sülün
  • 541
  • 8
  • 19