如何防止 angular.js $http 对象发送 X-Requested-With 标头？

Posted 2023-02-27

【中文标题】如何防止 angular.js $http 对象发送 X-Requested-With 标头？

【英文标题】：How to prevent angular.js $http object from sending X-Requested-With header?

【发布时间】：2012-09-01 00:22:49

【问题描述】：

Angular.js 在使用 $http 对象访问 Web 服务时，会自动在请求中添加 X-Requested-With:XMLHttpRequest 标头。

我使用 CORS 访问的 Web 服务不支持 X-Requested-With 标头，因此我尝试消除它，但无法访问 $httpProvider 对象。我得到一个未定义的对象错误，如果我在控制器参数中引用它，那么角度注入它我得到一个“错误：未知提供者：$httpProviderProvider

所以我想知道如何访问 $httpProvider，就像它在文档 (http://docs.angularjs.org/api/ng.$http) 中所说的那样告诉 angular.js 不要发送该标头.. .

【参考方案1】：

angular.module('myModule', [])
    .config(['$httpProvider', function($httpProvider) 
        delete $httpProvider.defaults.headers.common["X-Requested-With"]
    ])

【讨论】：

当我这样做时，它在 Chrome 中运行良好，但似乎有将请求标头“Origin”作为“null”发送的副作用。这非常糟糕，因为我的服务器返回的响应标头“Access-Control-Allow-Origin”与从请求“Origin”接收到的值相同，因此浏览器中的 CORS 失败。

在我上面的评论中，我忘记指定失败的浏览器（将请求标头“Origin”发送为“null”）是 Mac 和 ios 的 Safari。

如何添加回来，但不是在配置中，在$http 承诺本身？似乎$httpProvider.defaults.headers.common["X-Requested-With"] 是一个数组？

【参考方案2】：

我发现，除了 Justen 的回答之外，我还可以像这样按请求进行操作：

delete $http.defaults.headers.common['X-Requested-With']

【讨论】：

$http.defaults.headers.common… 和$httpProvider.defaults.headers.common… 有什么区别？

没有区别。使用 $httpProvider 在构建 $http 服务之前配置标头；但是使用 $http 您可以在 $http 服务创建后立即添加标头。共同点没有区别

【参考方案3】：

由于 Angular JS 版本 1.1.1 不再需要删除标题。

查看更改日志：https://github.com/angular/angular.js/blob/master/CHANGELOG.md#111-pathological-kerning-2012-11-26

对于像我这样使用标头来识别 ajax 请求并以不同方式响应它们的人。

例如在会话到期后发出请求。

您可以像这样重新启用标题：

angular.module('yourModule', [])
.config(['$httpProvider', function($httpProvider) 
    $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
]);

【讨论】：

很高兴在这里阅读并注意到这一点 ;) 无需手动删除 CORS 预检检查：prevent CORS preflight checks by removing X-Requested-With from header defaults

您应该使用标准 HTTP 标头（例如 Accept）而不是 X-Requested-With，以区分 XHR 调用与常规 HTTP 调用。标准标头不会触发 CORS 的预检，因此可以将延迟减少 50%。

【参考方案4】：

由于 Angular JS 版本 1.1.1 不再需要删除标题。 https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet#Protecting_REST_Services:_Use_of_Custom_Request_Headers

上提到了此更改

如 Josue 所示，这可以很容易地再次添加到所有请求中，如下所示：

angular.module('yourModule', [])
    .config(['$httpProvider', function($httpProvider) 
        $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
    ]);

为header to undefined 设置配置以删除特定外部请求的标头。

let urlExternalValidator = 'https://openiban.com/validate/' + this.iban + '?getBIC=true&validateBankCode=true';
this.$http.get(urlExternalValidator, 
    // simple request to not trigger a CORS preflight
    // https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    headers: 
        'X-Requested-With': undefined
    
)

此外，您可以在配置对象中提供 headers 属性 调用 $http(config) 时传递，它会覆盖默认值 无需全局更改。

显式删除自动添加的标头 $httpProvider.defaults.headers 基于每个请求，使用标头 属性，将所需的标头设置为未定义

https://docs.angularjs.org/api/ng/service/$http#setting-http-headers