使用AngularJS發送HTTP請求到另一個域

Question

我一直在使用django-rest-framework開發API。

但是，當我在本地主機上運行虛擬Web服務器並嘗試向api發送請求時，出現此錯誤

XMLHttpRequest cannot load http://127.0.0.1:8000/users?format=json. No ' Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

經過快速搜索后，我意識到問題是我將請求發送到其他域（在我的情況下為其他端口），並且可以通過安裝一些新應用程序來解決該問題。 但是，我不想在django中這樣做，而是通過編輯我發出請求的方式。 我現在就是這樣的：

Geonix.controller('mainController', function($scope, $http) {
          var config = { headers: {'Content-Type': 'application/json; charset=utf-8'}};
            $http.get('http://127.0.0.1:8000/users?format=json', config).success(function(data) {
                $scope.users = data;
            });
        });

有沒有辦法在不更改后端的情況下獲得正確的響應？ 請注意，實際服務器上的api和網頁也將在不同的端口上運行，因此問題仍然存在。

Answer 1

您應該使用django-cors或可以使用JSONP，但它僅接受get請求。

Answer 2

正如其他人所說，您應該真正考慮使用django-cors-middleware 。

如果您擁有正確的Auth方法，或者應該公開使用該API，則可以繼續在CORS_ORIGIN_ALLOW_ALL = True上設置CORS_ORIGIN_ALLOW_ALL = True ，以獲取超快速解決方案。 恐怕除此之外您無能為力。

我曾經通過在<img>標簽中加載一些路由來避開CORS，但這是一種超級hacky的方法，用於在無法控制服務器的情況下必須盡快運行的非常具體的概念證明。 在那種情況下，我只需要觸摸服務器的路由即可執行某些操作，它就是一台Node.js服務器。 我不建議您嘗試繞過CORS，特別是考慮到使用django-cors-middleware多么容易。

作為補充，django-cors-headers不再維護。 如果您的Django安裝版本為1.10或更高版本，則需要使用django-cors-middleware。

Answer 3

Angular正在您的Django應用上執行飛行前OPTIONS請求，但未在Django上啟用CORS。 如果您能夠在Django中激活CORS，則可以省去很多麻煩。

另一個選擇是使用JSONP，這也是您必須在Django中進行的配置更改。

但是問題特別是關於在不修改Django的情況下發出請求。

在這種情況下，由於您的內容類型為“ application / json”，因此啟用了預檢。 如果將其更改為“文本/純文本”，Angular將跳過預檢並撥打電話。

由於結果數據將是純文本，因此您可以使用JSON.parse()將其轉換為對象：

var config = { headers: {'Content-Type': 'text/plain; charset=utf-8'}};
$http.get('http://127.0.0.1:8000/users?format=json', config).success(function(data) {
  $scope.users = JSON.parse(data);
});