Preflight response is not successful

Question

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?

Answer 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

Then verify the Access-Control-Allow-Origin is the same with your Origin