Angular资源如何保留ajax标头并同时启用cors

Question

在我的 ng-resource 文件中，我启用了 ajax 标头：

var app = angular.module('custom_resource', ['ngResource'])

app.config(['$httpProvider', function($httpProvider) {
    //enable XMLHttpRequest, to indicate it's ajax request
    //Note: this disables CORS
    $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
}])

app.factory('Article', ['$resource', function($resource) {
    return $resource('/article/api/:articleId', {articleId: '@_id'}, {
        update: {method: 'PUT'},
        query: {method: 'GET', isArray: true}
    })
}])

这样我就可以相应地分离 ajax 和非 ajax 请求和响应（发送 json 数据，如 res.json(data)，或发送整个 html 页面，如 res.render('a.html')

例如，在我的错误处理程序中，我需要决定呈现 error.html 页面还是只发送错误消息：

exports.finalHandler = function(err, req, res, next) {
    res.status(err.status || 500)
    var errorMessage = helper.isProduction() ? '' : (err.message || 'unknown error')

    if (req.xhr) {
        res.json({message: errorMessage})
    }
    else {
        res.render(dir.error + '/error_page.ejs')
    }
}

但现在我需要向其他站点发出 CORS 请求。是否可以在保留 ajax 标头的同时进行 CORS 请求？或其他方式我可以识别来自服务器的 ajax 和非 ajax 请求？

如果我的问题不清楚，这里有一篇关于 Angular 和 CORS 的相关文章 http://better-inter.net/enabling-cors-in-angular-js/

基本上，我们需要删除 xhr 标头以启用其他服务器的 cors，但我需要自己的服务器的标头

编辑2：

今天我尝试集成谷歌地图，我得到了这个错误：

XMLHttpRequest cannot load http://maps.googleapis.com/maps/api/geocode/json?address=Singapore&sensor=false. Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers.

Answer 1

如果你使用的是最新版本的 angular.js，你可以这样做

首先，添加 xhr 标头（您所做的是正确的）

    $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

然后在你的谷歌地图搜索功能中

var searchAddress = function(address) {
    var params = {address: address, sensor: false};
    //Note: google map rejects XHR header
    $http.get(google_map_web_api_url, {params: params, headers: {'X-Requested-With': undefined}})
        .success(function(data, status, headers, config) {
        })
        .error(function(data, status, headers, config) {
        })
}

传入的headers config 参数将删除每个请求基数的xhr，这意味着您的ng-resource 请求不会受到影响

Answer 2

在 XHR 请求上设置自定义标头会触发预检请求。

因此，它不会禁用 CORS，但您的服务器很可能没有处理预检请求。

灵感来自这篇文章：https://remysharp.com/2011/04/21/getting-cors-working

解决方案应该是使用cors 模块并将以下内容添加到您的路由之前的node.js 代码中：

var corsOptions = {
    origin: true,
    methods: ['GET', 'PUT', 'POST'],
    allowedHeaders: ['X-Requested-With','Content-Type', 'Authorization']
};

app.options('*', cors(corsOptions)); //You may also be just fine with the default options

您可以阅读更多内容：https://github.com/expressjs/cors

Answer 3

您可以尝试使用cors package

Answer 4

首先，解决您最关心的问题是否可以在保留 ajax 标头的同时进行 CORS 请求？：答案是可以，前提是您访问的网站允许来自您或任何其他外部客户的请求。

你写道：

//Note: this disables CORS
$httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';

但我不明白你的意思，它“禁用 CORS”。 X-Requested-With 标头不是标准标头，将非标准标头添加到请求（由浏览器发出）的已知效果是触发飞行前请求 [3]。

如果您感兴趣的其他站点将其服务器设置为拒绝处理并非来自其自己域的请求，那么无论您是否设置该标头，您的请求都会失败。

对于发送到您自己的服务器的请求，您似乎一切正常。否则，您可以通过在服务器响应中附加 Access-Control-Allow-Origin 标头来解决问题，如下所示：

1. 如果您需要允许来自特定域的请求

   response.set("Access-Control-Allow-Origin", "one-host-domain, your-host-domain, some-other-host-domain"); // second argument is a comma-delimited list of allowed domains

   （对您来说，实际检查请求对象的来源可能会更好，如果基于预先确定的列表中的存在允许，则发回完全相同的来源）。

2. 如果您需要允许所有请求，无论其来源如何

   response.set("Access-Control-Allow-Origin", "*");

应该可以，我希望它能为你消除疑虑。

有关在使用 AJAX 时处理 CORS 的更多信息：0、1 和 2。

---

编辑

在评论中的交流之后，我添加以下几点以进一步支持这个答案。

就像今天一样，唯一需要在客户端-服务器系统中禁用/启用 CORS 的是服务器。默认情况下，所有现代浏览器都允许跨源请求，您无需执行任何其他操作即可支持该功能。我知道您正在添加一个自定义标头来区分 AJAX 请求和其他请求？？ AFAIK，该标头不会改变浏览器如何发出请求。

这是当今浏览器处理所有跨域请求的方式：对于所有请求方法（但通常除了 GET），浏览器会发送一个 pre- OPTION 方法的航班请求。如果目标服务器允许，则发送实际请求，否则请求失败。在服务器以拒绝响应的情况下，您或您使用的任何库都无能为力。这是我亲身经历的事实。

Answer 5

我想到了 3 个解决方案： 1. 请求站点管理员在 CORS 中启用 x-requested-with 标头。 2.使用代理服务器。 3. 发送不带 x-requested-with 标头的请求。

This article 应该明确 CORS 的工作原理以及如何发出 CORS 请求。 特别是“简单请求”部分和“访问控制”部分，尤其是访问控制允许标头描述在这种情况下很重要。

正如它所说：对于简单的请求 access-control-allow-origin 就足够了。但是如果请求包含自定义头（默认不包含的头，例如x-requested-with头），则会触发预检请求，服务器对此请求的响应应该启用此自定义access-control-allow-headers 中的标头，通过将其值设置为“*”或自定义标头的名称 (x-requested-with)。 p>

希望它能让它更清楚一点。