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.