0

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
AngularDev
  • 11
  • 3

2 Answers2

0

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 :)

danday74
  • 38,089
  • 29
  • 169
  • 214
  • 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? – AngularDev Apr 17 '21 at 11:20
  • 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) – danday74 Apr 17 '21 at 12:37
0

So I finally solved it!

The answer in this link works it says that we need to update the web config file with a new rule for OPTIONS request.

CORS preflight request returning HTTP 401 with windows authentication

To use the above sol you will have to download url rewrite for Web platform installer(this also has to be downloaded) on IIS Server.

Remember that only windows authentication should be enabled(Also click on the windows auth option and click advanced settings from there push NTLM to the top of the list).

user15806937
  • 1