Axios 被 Django REST 框架的 CORS 策略阻止

Posted 2023-02-22

【中文标题】Axios 被 Django REST 框架的 CORS 策略阻止

【英文标题】：Axios blocked by CORS policy with Django REST Framework

【发布时间】：2019-08-17 09:39:42

【问题描述】：

我正在尝试使用 Axios 向我的 API（Django REST 框架）发出请求，但出现以下错误：

Access to XMLHttpRequest at 'http://trvl.hopto.org:8000/api/airports/MSP/routes' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

当你使用 cUrl 来检查时甚至很难：

curl -I -X GET   -H "Origin: http://localhost:3000"   -H 'Access-Control-Request-Method: GET'   http://trvl.hopto.org:8000/api/airports/MSP/routes 2>&1 | grep 'Access-Control-Allow-Origin'
Response: Access-Control-Allow-Origin: *

Full response from cUrl Options:
OPTIONS request: curl -I -X OPTIONS   -H "Origin: http://localhost:3000"   -H 'Access-Control-Request-Method: GET'   http://trvl.hopto.org:8000/api/airports/MSP/routes
HTTP/1.1 200 OK
Date: Wed, 27 Mar 2019 10:58:01 GMT
Server: WSGIServer/0.2 CPython/3.6.8
Content-Type: text/html; charset=utf-8
Content-Length: 0
Vary: Origin
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: accept, accept-encoding, authorization, content-type, dnt, origin, user-agent, x-csrftoken, x-requested-with
Access-Control-Allow-Methods: DELETE, GET, OPTIONS, PATCH, POST, PUT
Access-Control-Max-Age: 86400

使用 Axios 时：

let url = 'http://A.hopto.org:8000/api/airports/MSP/routes';

axios.get(url)
      .catch((err) => 
        console.error(err);
      )
      .then((response, ) => 
        console.log(response);
      );


Response:
Access to XMLHttpRequest at 'http://API.hopto.org:8000/api/airports/MSP/routes' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

问题是 API 启用了 CORS，但我无法使其在我的 WebApp 中与 Axios 和 React 一起使用。

更新：

Here is my Django settings.py I'm using the https://github.com/ottoyiu/django-cors-headers module.

**settings.py**

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = ['*']

# Application definition

INSTALLED_APPS = [
    'corsheaders',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'trvl',
    'rest_framework',
    'coreapi',
    'django_filters',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    #'corsheaders.middleware.CorsPostCsrfMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware'
]

CORS_ORIGIN_ALLOW_ALL = True

【问题讨论】：

您是否检查以确保 django 的请求 URL 位于允许的来源中？

双重检查：是否为 GET 设置了响应标头？ Curl 响应是针对 OPTIONS 请求的

源页面是https还是http？您的代码在 HTTP 页面上工作正常，但在 HTTPS 上失败

我使用 * 通配符来允许所有来源并且 GET 也返回 Allow-Origins * 标头，来源页面也是 HTTP

我找到了一个有效的答案：***.com/questions/55108410/…

【参考方案1】：

这是因为您忘记了网址末尾的“/”。

let url = 'http://A.hopto.org:8000/api/airports/MSP/routes/';

【参考方案2】：

在您的后端代码中，您需要添加 http://localhost:3000 作为字段 Access-Control-Allow-Origin 的响应标头的一部分

还要确保您的回复包含此字段Access-Control-Allow-Methods 包括GET

您提到您的后端 API 代码启用了 CORS。如果上述方法不起作用，您能否更新您的帖子以包含您的设置方式？

【讨论】：

我使用通配符 * 来允许所有来源，我将尝试添加 GET 以允许方法，我刚刚用我的 Django settings.py 更新了帖子并添加了来自的整个 OPTIONS 响应卷曲

【参考方案3】：

我需要将http:// 前缀添加到我的localhost:8000 url