Preflight response is not successful

I’m developing a web application with angular that sends a request to my Azure API. The API is protected by angular. When I call the url in the browser, I get redirected to the microsoft login page. After the login I come back to the API.

Now, I want to send a request to the API from my angular app:

const auth = btoa("[my username]:[my password]");
headers = {"Authorization": "Basic " + auth};

$http.get("http://[webapp name].azurewebsites.net/api/contacts", {headers: headers}).then(function (response) {
    console.log("!!!LoggedIn!!!");
});

I added the [webapp name].azurewebsites.net to my CORS in the azure portal.
When I execute this, I get the error:

[Error] Failed to load resource: the server responded with a status of
400 (Bad Request)

[Error] Failed to load resource: Preflight response is not successful

[Error] XMLHttpRequest cannot load http://[webapp name].azurewebsites.net/api/contacts

azurewebsites.net/api/contacts. Preflight response is not successful

Any idea how to fix it?

UPDATE

I tried it again with this code:

const auth = btoa("[my username]:[my password]");
var config = {headers:  {
              'Authorization': 'Basic ' + auth,
              "Origin": "http://[webapp name].azurewebsites.net/api/contacts",
              "Access-Control-Request-Method": "GET",
              "Access-Control-Request-Headers": "X-Custom-Header"
              }
};

$http.get("http://[webapp name].azurewebsites.net/api/contacts", config).then(function (response) {
    console.log("!!!LoggedIn!!!");
});

Now I’m getting these errors:

Refused to set unsafe header “Origin”

Refused to set unsafe header “Access-Control-Request-Method”

Refused to set unsafe header “Access-Control-Request-Headers”

Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested
resource. Origin ‘null’ is therefore not allowed access. The response
had HTTP status code 400

When I delete these “unsafe headers” the last error message is still there.

Why does Origin is null automatically?

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

You should add the address of your requesting site URL in CORS in your Server/Backend code. Each language or framework might have their own way of adding this, try to search “[backend language] cors” (e.g. “C# cors”) in google. (credits to @Gary Liu – MSFT)

You can confirm you have added correct origin by inspecting network tab in developer’s console.

First select the request with method OPTIONS
enter image description here

Then verify the Access-Control-Allow-Origin is the same with your Origin
enter image description here

Solution 2

How about setting up a proxy instead?

proxy.config.json

{
  "/api/contacts" : {
    "target": "http://{{webapp name}}.azurewebsites.net/api/contacts",
    "secure": "false,
    "changeOrigin": true,
    "pathRewrite": {
      "^/api/contacts/": ""
    }
  }
}

You can find more details on https://angular.io/guide/build#proxying-to-a-backend-server

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply