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"