Angularjs：为什么添加授权 header 会导致 -1 状态响应？

Question

我有一个 pre-existing angular 代码可以从 API 获取数据。我正在尝试向请求添加身份验证令牌。

首先我尝试了一个简单的例子

.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 时，我收到一条错误消息：

angular.js:11821 OPTIONS http://localhost:56057/ContactsDatabaseAPI/deps net::ERR_CONNECTION_RESET

-1 的 return 状态，并且没有调用到服务器端的迹象。

没有 headers 行，它工作正常。

如果我在 Postman 中使用相同的授权值在 header 中尝试 GET 调用，这也可以正常工作。

我也尝试在 httpInterceptor 中添加 header 并得到相同的结果：

config.headers = config.headers || {};
config.headers.Authorization = 'Bearer ' + authData.token;

我尝试过的其他事情：

随机 header 名称会导致同样的问题。
我添加了 'Content-Type' = 'text/plain; charset=utf-8' 作为 header。这对结果没有改变

我正在使用 angular 1.5.6

Answer 1

试试这个（在控制器中）：

$http.defaults.headers.common.Authorization = 'Bearer ' + 代币;

Answer 2

我已经解决了我的问题，感谢@Mourad-Idrissi 为我指明了正确的方向。

它之前起作用的原因是在 API 是运行之前没有 Pre-Flight 检查。当我添加 header 时，这改变了客户端与 API 通信的方式。现在有一个对 API 的 OPTIONS 调用导致了错误。由于域不同，这让我进入了 CORS 的世界。

通过在我的后端 Web API 中将以下内容添加到我的 Application_BeginRequest() 方法中，Pre-flight 现在通过并且我的应用程序继续。

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：为什么添加授权 header 会导致 -1 状态响应？

Angularjs: Why does adding an authorization header cause a -1 status response?

asynchronous

http-post

angularjs

restier