Angular cors issue :Response to preflight request doesn't pass access control check: It does not have HTTP ok status

Question

I have an angular 8 application which makes a POST request to Flask REST API's which are hosted on IIS server(with windows Authntication). The problem is every time I do a POST request from my angular code I get CORS error:

Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

The api's work fine when I call them directly from browser directly the problem is when I call them from my angular project.

I have used the flask-CORS library:

cors = CORS(app, resources={r"/*": {"origins": "*"}})

@app.route('/', methods=['GET', 'POST'])
@cross_origin(origin='*', headers=['Content-Type', 'Authorization'], supports_credentials=True)
def home(): 
    """
    Returns template for Home page .
    """
    return "<h1>Home Page</h1>"

I In my IIS server I have set these HTTP response headers:

Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS

When I check the network tab I get CORS error and not status 401 so I assume the error is not an authentication issue.

I have been through multiple stackoverflow questions but all of them deal with ASP.net and the few that deal with flask they all mentioned setting the Headers in IIS server but my issue remains unsolved.

Please guide me on this...

EDIT

This are my response headers:

Provisional headers are shown
Accept: application/json, text/plain, */*
content-type: application/json

Solution

When you make a POST request the browser auto makes a preflight OPTIONS request. The purpose of the OPTIONS request is to verify that you have permissions to make the POST request.

There are 2 solutions to your problem:

(1) Setup CORs headers on your server to allow requests from other domains (2) Set your server to proxy requests - This bypasses the browser and since only the browser enforces CORS, you no longer need CORS headers on your server.

Approach (1) you can test if the CORs headers are coming through as expected on your browsers network tab. Possibly, you also need to support the OPTIONS preflight method.

Approach (2) is more secure but more work since you would need to set this up also on your prod server (if u have one).

An article about Angular proxy is here ... https://medium.com/bb-tutorials-and-thoughts/angular-how-to-proxy-to-backend-server-6fb37ef0d025 ... but I am sure there are better articles, just search it up!

All the best :)

Comments

[AngularDev]

Hi, So I tried the first method I have modified the question to show the response Headers.. I am clueless as to why it says provisional headers with a warning sign and I cant see the other hearders.. I have set Methods to allow OPTIONS(on server side) as I mentioned earlier. Any suggestons?

[danday74]

I dont know anything about flask sadly - My guess would be you need to adjust this to allow Access-Control-Allow-Methods: POST, GET, OPTIONS ... @cross_origin(origin='*', headers=['Content-Type', 'Authorization'], supports_credentials=True)