预检响应不成功 [英] Preflight response is not successful

问题描述

我正在开发一个带有 angular 的 Web 应用程序，用于向我的 Azure API 发送请求.API 受 angular 保护.当我在浏览器中调用 url 时，我被重定向到微软登录页面.登录后，我回到 API.

现在，我想从我的 Angular 应用程序向 API 发送请求:

const auth = btoa("[我的用户名]:[我的密码]");headers = {授权":基本"+ auth}；$http.get("http://[webapp name].azurewebsites.net/api/contacts", {headers: headers}).then(function (response) {console.log("!!!登录！！！");});

我在 azure 门户中将 [webapp name].azurewebsites.net 添加到我的 CORS.当我执行此操作时，出现错误:

<块引用>

[错误] 加载资源失败:服务器响应状态为400(错误请求)

[错误] 加载资源失败:预检响应不成功

[错误] XMLHttpRequest 无法加载

然后验证 Access-Control-Allow-Origin 是否与您的 Origin 相同

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?

解决方案

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

这篇关于预检响应不成功的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！