私はangularjsとdjango-cors-headersを使用していますが、これは "プリフライトを必要とするクロスソース要求に対しては許可されていません。"

Question

私は、8000ポート番号を参照するDjangoローカルサーバーと、2080ポート番号のhtmlページをロードするローカルnginxを持っています。

クロスドメインエラーを解決するためにdjango-cross-headerパッケージをインストールします。 settings.pyで

ジャンゴクロスヘッダの設定：

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' 
) 

構成はangularjsは次のようである：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/'); 

Getメソッドのコードは次のとおり

$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のサーバーからcorectly応答、私のjqueryのコードは以下となります。

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

リクエストヘッダis：

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', 
    ..., 
] 

最後に、「/」の末尾に1つのスラッシュがありません。 httpリクエストでcsrfトークンを追加して、 がPOST、PATCH、PUT、DELETEなどの安全でないHTTPメソッドで動作するようにする必要があります。仕事をする$cookiesサービスのために

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

}); 

、あなたはngCookies角度モジュールをインストールする必要があり、それはそれです。

Answer 2

私はあなたと同じ問題がありました。 httpd.confと角度アプリに次の設定を追加するだけでした。それだけです、the following stepsを通過してください。

<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; 
    }]); 

Here CORSの詳細です。

Answer 3

Try this for enabling cross origin

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