带有 CORS 和自定义标头的 AngularJS

Posted 2023-03-04

【中文标题】带有 CORS 和自定义标头的 AngularJS

【英文标题】：AngularJS with CORS and custom headers

【发布时间】：2014-01-14 04:51:13

【问题描述】：

我正在使用 Angular $HTTP 向远程 API 服务 (SmartyStreets.com) 发出 CORS 请求。我已经按照有据可查的方式设置了默认值。

.config(['$httpProvider', function($httpProvider) 
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
])

当我发出没有自定义标头的普通请求时，一切都按预期工作。

// This works as expected
$http(method: 'get', url: $scope.addr.url, headers: )

但是，我现在需要设置一些额外的自定义标题。但是设置自定义标头会破坏 CORS 请求。

// this results in the browser 404 error:
// No 'Access-Control-Allow-Origin' header is present on the requested resource
$http(method: 'get', url: $scope.addr.url, 
headers: 'x-standardize-only': 'true', 'x-  include-invalid': 'true')

这几天我一直在尝试解决这个问题……卡住了。有谁知道如何解决这个问题？

谢谢！！

【问题讨论】：

您使用的是哪个版本的 Angular？

使用 1.2.6 - 最新的稳定版本。

在进一步的故障排除中，在设置自定义标头时，我注意到在 Chrome 中，当我尝试添加启用 CORS 的自定义标头时，angular 正在设置“Access-Control-Request-Headers”。

【参考方案1】：

您的服务器需要正确响应浏览器将代表您发出的 OPTIONS 请求，以确定 CORS 请求是否有效。它需要包含一个 Access-Control-Allow-Headers 标头，其中包含正确的信息。见：https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS#Preflighted_requests

【讨论】：

我不控制服务器端。 Web 服务确实以正确的标头响应：Access-Control-Allow-Headers:* Access-Control-Allow-Methods:GET, POST, PUT Access-Control-Allow-Origin:*

Access-Control-Allow-Headers 不接受通配符。 Web 服务实现不正确。

嗯...如果我调用 Web 服务而不尝试自定义请求标头，它会成功运行。这是在将默认 $httpProvider 配置为 useXDomain 之后。

正确--服务器响应错误的 ACAH 标头。您应该让他们解决这个问题，因为它无法与他们目前在响应中的通配符一起使用。