问题描述
我有一个预先存在的角度代码,可以从API获取数据.我正在尝试向请求添加身份验证令牌.
I have a pre-existing angular code that gets data from an API. I'm trying to add an authentication token to the request.
首先,我尝试了一个简单的示例
To begin with I tried a simple example
.factory('getDep', [
'$resource', function($resource) {
return $resource('/ContactsDatabaseAPI/deps/:id', { id: '@id' }, {
query: {
method: 'GET',
isArray: false,
headers: {
'Authorization': 'Bearer ' + token
}
},
create: {
method: 'POST'
},
update: {
method: 'PUT'
},
remove: {
method: 'DELETE'
}
});
}
触发GET调用,并在Chrome中进行F12-ing操作时,我收到以下错误消息:
When the GET call is fired, and F12-ing in Chrome, I get an error message of:
angular.js:11821 OPTIONS http://localhost:56057/ContactsDatabaseAPI/deps net::ERR_CONNECTION_RESET
返回状态为-1,并且没有呼叫到服务器端的迹象.
The return status of -1 and no sign of the call making it to the server side.
没有标题行,就可以正常工作.
Without the headers line, it works fine.
如果我尝试在 Postman 中的GET调用中在标题中使用相同的Authorization值,则此方法也可以正常工作.
If I try the GET call in Postman with the same Authorization value in the header, this also works fine.
我还尝试过将标头添加到httpInterceptor中,并获得相同的结果:
I've also tried to add the header in the httpInterceptor and get the same result:
config.headers = config.headers || {};
config.headers.Authorization = 'Bearer ' + authData.token;
我尝试过的其他事情:
- 随机标头名称会导致相同的问题.
- 我添加了'Content-Type'='text/plain; charset = utf-8'作为标题.结果没有变化
- A random header name causes the same issue.
- I've added 'Content-Type' = 'text/plain; charset=utf-8' as a header. This has no change to the result
我正在使用角度1.5.6
I'm using angular 1.5.6
推荐答案
我已经解决了我的问题,感谢@ Mourad-Idrissi为我指明了正确的方向.
I've solved my issue and thanks to @Mourad-Idrissi for pointing me in the right direction.
之所以可行,是因为在运行API之前没有进行飞行前检查.当我添加标题时,这改变了客户端与API通信的方式.现在,对API进行了OPTIONS调用,从而导致了错误.由于领域不同,这使我进入了CORS的世界.
The reason it worked before is that there was no Pre-Flight checks before the API was run. When I added the header, this changed the way the client communicated to the API. Now there was a OPTIONS call to the API which was causing the error. As the domain was different, this introduced me to the world of CORS.
通过将以下内容添加到我的后端Web API中的Application_BeginRequest()方法中,现在预检通过了,我的应用程序继续运行.
By adding the following to my Application_BeginRequest() method in my backend Web API, Pre-flight now passes and my application continues.
if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
{
HttpContext.Current.Response.AddHeader("Cache-Control", "no-cache");
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST");
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept, Authorization");
HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
HttpContext.Current.Response.End();
}
这篇关于Angularjs:为什么添加授权标头会导致-1状态响应?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!