16

我有一个基本的 AngularJS 服务设置，如下所示：

app.factory('User', function($resource) {
return $resource('http://api.mysite.com/user/:action:id/:attr', {}, {
    history: {
        method: 'GET',
        params: {
            attr: 'history'
        }
    },
    update: {
        method: 'POST',
        params: {
            name: 'test'
        }
    }
});
});

我像这样使用它：

User.history({id: 'testID'}, function(data) {
    console.log('got history');
    console.log(data);
});
User.update({id: 'me'}, function(data) {
    console.log('updated');
    console.log(data);
});

问题一： User.update() 尽管将方法设置为 POST，但仍将 OPTIONS 作为请求方法发送。

尽管 Chrome 开发工具报告请求标头 Access-Control-Request-Method:POST 也已发送（不确定这是否意味着什么）。

问题二：尽管在 API 代码中设置了这些标头，但我仍然收到 CORS 错误：

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS");

这个问题只有在发出非 GET 请求时才会出现。

处理这个问题的正确方法是什么？我也研究过 JSONP，但这是一个 RESTful api，我不确定如何仅通过 GET 支持来解决问题。

4

3 回答 3

14

你的两个问题实际上是一个问题。OPTIONS 请求是 CORS 过程的一部分。对于 POST 请求，浏览器首先发送一个 OPTIONS 调用，如果可以执行，服务器会做出响应。

如果 OPTIONS 请求失败，Angular / Chrome 会在控制台中显示原因。例如：

OPTIONS https://*** Request header field Content-Type is not allowed by Access-Control-Allow-Headers. angular.min.js:106

XMLHttpRequest cannot load https://***. Request header field Content-Type is not allowed by Access-Control-Allow-Headers.

您可能还必须在服务器上设置 Access-Control-Allow 标头：

header('Access-Control-Allow-Headers: Content-Type, x-xsrf-token')

x-xrsf-token 用于 angular' 以防止 CSRF。您可能需要添加更多标头，具体取决于您从客户端发送的内容。

这是一个非常好的 CORS 指南：https ://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS

于 2013-06-25T09:10:57.243 回答
7

在 AngularJS 中，要使 CORS 正常工作，您还必须覆盖 angular 的默认设置httpProvider：

var myApp = angular.module('myApp', [
    'myAppApiService']);

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

仅将 useXDomain 设置为 true 是不够的。AJAX 请求也与 X-Requested-With 标头一起发送，这表明它们是 AJAX。删除标头是必要的，因此服务器不会拒绝传入的请求。

注意：答案仅适用于 1.2 之前的旧 AngularJS 版本。使用 1.2 及更高版本，您无需执行任何操作即可启用 CORS。

于 2013-06-25T10:13:35.373 回答
0

最好在服务器上解决这个问题。在 apache 上，您可以像这样在.htaccess文件中解决它。这是角度发展的痛苦来源，也可以用角度解决，但它可能不是最好的方法。

Header set Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
于 2016-01-07T19:55:19.983 回答