首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用Django REST框架的CORS策略阻止了Axios

使用Django REST框架的CORS策略阻止了Axios
EN

Stack Overflow用户
提问于 2019-03-27 05:53:28
回答 3查看 5.7K关注 0票数 2

我尝试使用Axios向我的API(Django REST框架)发出请求,但得到以下错误:

代码语言:javascript
复制
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进行检查时也很困难:

代码语言:javascript
复制
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时:

代码语言:javascript
复制
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.

问题是应用程序接口启用了CORS,但我无法在我的WebApp中使用Axios和React。

更新:

代码语言:javascript
复制
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
EN

回答 3

Stack Overflow用户

发布于 2020-06-01 23:39:49

这是因为你在url的末尾忘记了“/”。

代码语言:javascript
复制
let url = 'http://A.hopto.org:8000/api/airports/MSP/routes/';
票数 6
EN

Stack Overflow用户

发布于 2019-03-27 08:00:42

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

另外,请确保您的响应中包含此字段,包括GET

您提到您的后端API代码启用了CORS。如果上面不起作用,你可以更新你的帖子,包括你是如何设置它的吗?

票数 0
EN

Stack Overflow用户

发布于 2020-08-09 02:27:51

我需要在我的localhost:8000 url中添加http://前缀

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55366740

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档