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开发工具报告了请求标头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. 

您可能也必须在服务器上设置访问控制允许标头：

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

x-xrsf-标记表示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-WWith标头发送，该标头指示它们异步传输删除标头是必要的，因此服务器不会拒绝传入请求。

注意：Answer仅适用于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"