我正在使用angularjs和django-cors-headers然后給出“對於需要預檢的跨源請求不允許”。

Question

我有一個Django本地服務器，引用8000端口號，和一個本地nginx加載2080端口號html頁面。

我安裝了django-cross-header包來解決跨域錯誤。

settings.py中的django-cross-header配置：

CORS_ALLOW_CREDENTIALS = True


CORS_ORIGIN_ALLOW_ALL = True

  CORS_ALLOW_HEADERS = (
         'x-requested-with',
         'content-type',
         'accept',
         'origin',
         'authorization',
         'x-csrftoken'
 )

  CORS_ORIGIN_WHITELIST = (
          '127.0.0.1:2080',
          'localhost:2080'
  )

Config angularjs是這樣的：

portman.config(function ($routeProvider, $interpolateProvider, $httpProvider) {
     $routeProvider.otherwise('/');
     $httpProvider.defaults.headers.common['X-CSRFToken'] = csrftoken;
     $interpolateProvider.startSymbol('{$').endSymbol('$}');
     delete $httpProvider.defaults.headers.common['X-Requested-With'];

 });
 portman.constant('ip','http://127.0.0.1:8000/');

在angularjs中獲取方法代碼是：

$http({
         method: 'GET',
         url: ip+'api/v1/dslam/events',
     }).then(function (result) {
        $scope.dslam_events = result.data;
     }, function (err) {

    });

請求標頭是：顯示臨時標頭

Accept:application/json, text/plain, */*
Origin:http://127.0.0.1:2080
Referer:http://127.0.0.1:2080/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.99 Safari/537.36
X-CSRFToken:ztouFO8vldho97bWzY9mHQioFk3j6h5V

加載頁面后，我看到此錯誤：

XMLHttpRequest cannot load http://127.0.0.1:8000/api/v1/dslam/events.The request was redirected to 'http://127.0.0.1:8000/api/v1/dslam/events/', which is disallowed for cross-origin requests that require preflight.

但是當我從控制台發送請求時，它將從django服務器核心響應，我的jquery代碼：

$.ajax({
            type: 'GET',
            url: "http://5.202.129.160:8020/api/v1/dslam/events/",
            success:function(data){
             console.log(data);
            }
        });

請求標題是：

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8,fa;q=0.6,pt;q=0.4
Connection:keep-alive
Host:127.0.0.1:8000
Origin:http://127.0.0.1:2080
Referer:http://127.0.0.1:2080/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.99 Safari/537.36

請幫我。

Answer 1

您需要在已安裝的應用中添加corsheaders 。

INSTALLED_APPS = [
    ...,
    'corsheaders',
    ...,
]

將corsmiddleware添加到中間件類。

MIDDLEWARE_CLASSES = [
    ...,
    'corsheaders.middleware.CorsMiddleware',
    ...,
]

最后你在網址“/”的末尾錯過了一個斜杠。 此外，您應該在http請求中添加csrf標記，以便它可以使用不安全的http方法，如POST，PATCH，PUT和DELETE。

$http({
    method: 'GET',
    url: ip+'api/v1/dslam/events/',
    'X-CSRFToken' : $cookies.get('csrftoken')
}).then(function (result) {
    $scope.dslam_events = result.data;
}, function (err) {

});

為了使$cookies服務起作用，您需要安裝ngCookies角度模塊，就是這樣。

Answer 2

試試這個來啟用交叉原點

https://github.com/ottoyiu/django-cors-headers

Answer 3

我遇到了和你一樣的問題。 我只需要在httpd.conf和angular app中添加以下設置。 就是這樣，只需執行以下步驟即可 。

<IfModule mod_headers.c>
SetEnvIf Origin (.*) AccessControlAllowOrigin=$1
Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
Header set Access-Control-Allow-Credentials true
</IfModule> 

並在角度應用程序中

angular.module('app', ['ngCookies'])
    .config([
   '$httpProvider',
   '$interpolateProvider',
   function($httpProvider, $interpolateProvider, $scope, $http) {
       $httpProvider.defaults.withCredentials = true;
       $httpProvider.defaults.xsrfCookieName = 'csrftoken';
       $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
   }]).
   run([
   '$http',
   '$cookies',
   function($http, $cookies) {
       $http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;
   }]);

以下是有關CORS的詳細信息。