AngularJS：POST数据到外部REST API

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用于“防止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"