我正在使用 angularjs 和 django-cors-headers 然后给出“这对于需要预检的跨域请求是不允许的。”

Posted 2023-03-03

【中文标题】我正在使用 angularjs 和 django-cors-headers 然后给出“这对于需要预检的跨域请求是不允许的。”

【英文标题】：i am using angularjs and django-cors-headers then give "which is disallowed for cross-origin requests that require preflight."

【发布时间】：2017-01-09 10:33:54

【问题描述】：

我有一个引用 8000 端口号的 Django 本地服务器，以及一个加载 2080 端口号 html 页面的本地 nginx。

我安装了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'
  )

配置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

请帮帮我。

【参考方案1】：

Try this for enabling cross origin

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

【参考方案2】：

您需要将corsheaders 添加到已安装的应用中。

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

将corsmiddleware 添加到中间件类。

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

最后，您在网址“/”的末尾缺少一个斜杠。 此外，您应该在您的 http 请求中添加 csrf 令牌，以便它工作 使用 POST、PATCH、PUT 和 DELETE 等不安全的 http 方法。

$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 angular 模块，仅此而已。

【参考方案3】：

我和你有同样的问题。我只需要在httpd.conf 和 Angular 应用程序中添加以下设置。就是这样，只需通过the following steps。

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

在 Angular 应用中

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 的详细信息。