Question

我有一个基本的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 Dev工具报告请求标头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支持的问题。

Answer 1

你的两个问题实际上是一个问题。 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 Headers：

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

Answer 2

在AngularJS中，要使CORS正常工作，您还必须覆盖角度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。

Answer 3

最好在服务器上解决此问题。在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"

AngularJS：POST数据到外部REST API

3 个答案: