CODEWITHSUNDEEP
angularjshttpazurexmlhttprequest
chocolate cake
chocolate cake

Reputation: 2479

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?

Upvotes: 16

Views: 95716

Answers (2)

Jiri Kralovec
Jiri Kralovec

Reputation: 1617

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

Upvotes: -1

Icycool
Icycool

Reputation: 7179

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

Upvotes: 19

Related Questions