Angularjs:为什么添加授权标头会导致-1状态响应? [英] Angularjs: Why does adding an authorization header cause a -1 status response?

问题描述

我有一个预先存在的角度代码，可以从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状态响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！