飞行前响应不成功 [英] Preflight response is not successful

问题描述

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

现在，我想从我的角度应用程序向API发送请求：

  const auth = btoa（[我的用户名]：[我的密码]）; 
 headers = {授权：基本+ auth}; 
 
 $ http.get（http：// [webapp name] .azurewebsites.net / api / contacts，{headers：headers}）。then（function（response）{
 console.log（!!! LoggedIn !!!）; 
}）; 
  

我在[azure portal]中将[webapp name] .azurewebsites.net添加到我的CORS中。
当我执行此操作时，我收到错误：

[错误]无法加载资源：服务器响应状态
400（错误请求）

[错误]无法加载资源：预检响应不成功

[错误] XMLHttpRequest无法加载

然后验证 Access-Control-Allow-Origin 与 Origin $ b相同$ b

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.

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屋！