问题描述
我正在开发一个带有 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:
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:
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
这篇关于预检响应不成功的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!