AngularJS + Nginx CORS答案

【问题标题】：AngularJS + Ngingx CORSAngularJS + Nginx CORS
【发布时间】：2013-01-24 20:25:21
【问题描述】：

我正在尝试进行以下设置：

API

api.domain.com

应用程序

域名.com

我设置了 2 个不同的 nginx 配置，每个 2 个 url 一个。当在浏览器（api.domain.com/test）中执行常规 GET 请求时，它们都可以工作，但是当从 angularjs（POST）执行 $resource 调用时，它们都崩溃了。这会返回一个

     not allowed by Access-Control-Allow-Origin.

我已经做了一段时间了，一直在玩不同的配置文件。我目前正在使用以下文件，但我不知道这是否可行。

http://paste.laravel.com/h6U

任何帮助将不胜感激

【问题讨论】：

OPTIONS 调用是否按预期完成（如果您使用 chrome devtools，则返回 200）？如果是并且随后的 POST 失败，则似乎在服务器端缺少一些标头和状态代码...

标签： angularjs nginx cors

【解决方案1】：

你可以参考这个post。

我也是 angularjs 的新手。我用 nodejs 编写我的后端代码。当尝试通过angularjs在前端使用后端的api时，我遇到了和你一样的问题。

所以我使用nginx来存储我的应用程序，然后在我的/etc/nginx/conf.d/default.conf文件中我可以用nginx更改路由器，这样可以避免Access-Control-Allow-Origin引起的问题。

希望对你有帮助。

【讨论】：

【解决方案2】：

要在 Angular JS 中使用 CORS，请尝试将此配置添加到应用程序的 Angular 模块中

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

对于 Nginx 端，您需要配置 nginx 或您的应用程序服务器以返回一个 Access-Control-Allow-Origin 标头，其中包含客户端发送的 Origin 标头的值（如果它与允许列表匹配）。我想这个配置应该可以工作，

if ($http_origin ~ "^(http://developers.example.com|http://example.com)$") {
    add_header "Access-Control-Allow-Origin" $http_origin;
}

【讨论】：

【解决方案3】：

我对 angularJs 和 Nginx 有同样的问题所以我在我的 nginx 配置中添加了以下代码。经过大量搜索后，我发现的重要事情是 [总是] 关键。使用 [always] 键的关键在于，当我使用代码时，我没有得到任何错误状态码，而我只得到 200 和 201，其他状态码会出现跨源错误。

 add_header 'Access-Control-Allow-Origin' http://127.0.0.1 always;
 add_header 'Access-Control-Allow_Credentials' 'true';
 add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Access-Control-Allow-Origin';
 add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';

【讨论】：