无法使用角度正确设置自定义标题答案

【问题标题】：Unable to properly set custom headers using angular无法使用角度正确设置自定义标题
【发布时间】：2015-03-05 07:12:39
【问题描述】：

我有一个在启用了 CORS 的 IIS 上运行的 .net WebAPI 项目。这个项目有一个授权处理程序，它在每个请求中检查一个名为“Token”的标头，现在它只检查它是否有一个字符串值。

在我的 Angular API 调用中，我使用以下行来添加标题。我从角度文档中获取了这个

$http.defaults.headers.common['Token'] = 'C3POR2D2';

来自 fiddler 的 API 原始数据如下。

OPTIONS http://localhost:81/api/Sample/GetSubordinateRolesForUser/1 HTTP/1.1
Host: localhost:81
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://localhost
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)     Chrome/40.0.2214.45 Safari/537.36
Access-Control-Request-Headers: accept, token
Accept: */*
Referer: http://localhost/Account/Login
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8

在这里，“令牌”显示为 Access-Control-Request-Headers 下的一个值。这导致我的授权处理程序返回 403 Forbidden，因为它期望标头 'Token' 带有一些字符串值。

以下是响应原始数据

HTTP/1.1 403 Forbidden
Cache-Control: no-cache
Pragma: no-cache
Expires: -1
Server: Microsoft-IIS/8.5
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Access-Control-Allow-Headers: Token
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE
Date: Wed, 07 Jan 2015 11:28:43 GMT
Content-Length: 0

我在这里错过了什么？

【问题讨论】：

上述请求是可以的。浏览器首先使用 OPTIONS 方法检查是否允许浏览器访问带有给定标头的 url localhost:81/api/Sample/GetSubordinateRolesForUser/1。您的问题很可能是 CORS 问题。
我已编辑问题以包含响应标头，似乎启用了 CORS。

标签： .net angularjs http-headers cors

【解决方案1】：

使用这个。我也面临类似的问题

function getSettings(requestData) {
    return {
        url: requestData.url,
        dataType: requestData.dataType || "json",
        data: requestData.data || {},
        headers: requestData.headers || {
            "accept": "application/json; charset=utf-8",
            'Authorization': requestData.token
        },
        async: requestData.async || "false",
        cache: requestData.cache || "false",
        success: requestData.success || {},
        error: requestData.error || {},
        complete: requestData.complete || {},
        fail: requestData.fail || {}
    };
}

这样称呼它

    var requestData = {
        url: 'your API end point',
        data: project,
        token: yourtoken
    };

    var settings = getSettings(requestData);
    settings.method = "POST"; //Your request
    return $http(settings);

并删除 $http.defaults.headers.common['Token'] = 'C3POR2D2';

【讨论】：