I get CORS error in python flask RESTApi when sending a request using angular

Question

I have a python script which is a flask RESTApi:

from flask import Flask
from flask_cors import CORS

api = Flask(__name__)
CORS(api)

@api.route("/api/stopService", methods=['POST'])
def startService()
    return {
      "MSG": "OK"
    }

if __name__ == '__main__':
    api.run(port=8000)

Now I want to make a request with angular using this code:

this.http.post('http://localhost:8000/api/stopService', {}).subscribe((res: any) => {
    
});

It's just a simple button that when I click on, it triggers the request. but I get this error:

And if I click on the button again It's OK and I have the response.

Here is the flask log:

First line is when I get the CORS error, and the second and the third one is the OK response.

Edit 1
I changed my flask code to this but still no luck:

from flask import Flask

api = Flask(__name__)

@api.route("/api/stopService", methods=['POST'])
def startService()
    return {
      "MSG": "OK"
    }

@api.after_request
def addHeaders(response):
    response.headers.add('Access-Control-Allow-Origin', '*')
    response.headers.add('Access-Control-Allow-Headers', 'Content-Type')
    return response

if __name__ == '__main__':
    api.run(port=8000)

@MikeOne, I replaced the empty object with null, and it got fixed. please send an answer so I can accept it — Reza
– Reza, Commented Apr 6, 2022 at 10:22

Lungio · Accepted Answer · 2022-04-05 14:07:04Z

1

The problem is that angular runs on port 4200 and you try to do a call on port 8000. For the browser those are two different domains and therefore you get a cors error.

If you want to get it work on localhost, you have to add cors headers to the response in your python script:

Access-Control-Allow-Origin: http://localhost:4200

answered Apr 5, 2022 at 14:07

Lungio

614 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Reza Over a year ago

I'm using flask_cors

Lungio Over a year ago

Try to add @cross_origin() below @api.route. According to documentation of flas_cors this should solve your problem

Reza Over a year ago

I did that, nothing changed

Collectives™ on Stack Overflow

I get CORS error in python flask RESTApi when sending a request using angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related