飞行前响应不成功

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名称] .azurewebsites.net / api / contacts

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

知道怎么解决吗？

更新

我用这段代码再试一次：

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

现在我收到了这些错误：

  

拒绝设置不安全的标题＆＃34; Origin＆＃34;

     

拒绝设置不安全标题＆＃34;访问控制请求方法＆＃34;

     

拒绝设置不安全标题＆＃34;访问控制请求标题＆＃34;

     

对预检请求的响应没有通过访问控制检查：否＆＃39;访问控制 - 允许 - 来源＆＃39;标题出现在请求的上   资源。起源＆＃39; null＆＃39;因此不允许访问。响应   有HTTP状态代码400

当我删除这些＆＃34;不安全的标题＆＃34;最后一条错误信息仍在那里。

为什么Origin自动为空？

Answer 1

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

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

首先使用方法OPTIONS选择请求

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

Answer 2

如何设置代理呢？

proxy.config.json

# Create dummy data.
...

# Build a legend manually.
scatters = ax1.collections + ax2.collections # This is great if you can't save the return value of `ax.scatter(...)` because they are made somewhere else.
labels = [s.get_label() for s in scatters]
ax2.legend(scatters, labels, loc="upper left") # MUST use ax2.

# Enable the pickable legend elements.
 for n, legend_item in enumerate(ax2.get_legend().legendHandles, start=1):
        legend_item.set_gid(str(n))
        legend_item.set_picker(10) 

# Connect the pick event to a function.
...

您可以在https://angular.io/guide/build#proxying-to-a-backend-server

中找到更多详细信息