为什么添加授权标头会导致

为什么添加授权标头会导致

本文介绍了Angularjs:为什么添加授权标头会导致-1状态响应?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个预先存在的角度代码,可以从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通信的方式.现在,对A​​PI进行了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状态响应?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-05 20:17