飞行前响应不成功

Question

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

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

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!!!");
});

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

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

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

[错误] XMLHttpRequest无法加载http:// [webapp name] .azurewebsites.net/api/contacts

azurewebsites.net/api/contacts.飞行前响应不成功

知道怎么解决吗？

UPDATE

我用这段代码再试一次:

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!!!");
});

现在我收到这些错误:

拒绝设置不安全的标题"Origin"

拒绝设置不安全的标题"Access-Control-Request-Method"

拒绝设置不安全的标题"Access-Control-Request-Headers"

对预检请求的响应未通过访问控制检查:请求的资源上不存在"Access-Control-Allow-Origin"标头.因此不允许原点'null'访问.响应具有HTTP状态代码400

当我删除这些"不安全的标题"时,最后一条错误消息仍然存在.

为什么Origin自动为空？

Answer 1

您应该在CORS中添加请求站点URL的地址.

您可以通过检查开发人员控制台中的网络选项卡来确认您添加了正确的来源.

首先用方法选择请求 OPTIONS

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