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?

The CORS configuration should be set in your backend server side, which depends your language or framework using in backend side. Any further concern, please feel free to let me know. — Gary Liu, Nov 02 '16 at 01:45

Icycool · Accepted Answer · 2020-02-03T14:21:06.043

19

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

edited Feb 03 '20 at 14:21

answered Nov 01 '16 at 12:14

Icycool

7,099
1
25
33

Thanks for your fast answer, lcycool! The field "Access-Control-Allow-Origin" does not exist in my console. And the field "Origin" in the request header is null. So I did something wrong... – chocolate cake Nov 01 '16 at 12:26
1

@chocolatecake Hmm, I've never see a request without origin here... Is your calling script a local html file? If that is the case try to install a web server to serve it (you can do it locally, then the origin will be `http://localhost`) – Icycool Nov 01 '16 at 16:37
1

Oh, you're right, lcycool! I forgot the web service...^^ I added "localhost:8888" to my CORS policy. Now, I'm getting the error: `XMLHttpRequest cannot load http://[app name].azurewebsites.net/api/contacts. Redirect from[app name].azurewebsites.net/api/contacts' to 'https://[app name].azurewebsites.net/api/contacts' has been blocked by CORS policy: Request requires preflight, which is disallowed to follow cross-origin redirect.` Do you may know how I allow this? – chocolate cake Nov 02 '16 at 08:17
I haven't use any preflight request followed by redirect, so I'm not sure. A quick search on google shows that this use case might have not been accounted for previously, thus not handled correctly by browsers yet http://stackoverflow.com/questions/34949492/cors-request-with-preflight-and-redirect-disallowed-workarounds – Icycool Nov 02 '16 at 08:53
When I call Google Chrome with `open /Applications/Google\ Chrome.app --args --disable-web-security --user-data-dir ` to disable the CORS policies it works. It's not the best way, but I get data now :D. – chocolate cake Nov 10 '16 at 08:53
@chocolatecake well you can do this during development but you'll have to solve it in production anyway because you can't force your users to disable an important security feature. – Icycool Nov 10 '16 at 11:51

score -1 · Answer 2 · answered Feb 11 '20 at 13:05

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

Preflight response is not successful

2 Answers2

Linked