[英]Axios blocked by CORS policy with Django REST Framework
我正在嘗試使用 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
這是因為您忘記了網址末尾的“/”。
let url = 'http://A.hopto.org:8000/api/airports/MSP/routes/';
在您的后端代碼中,您需要添加http://localhost:3000
作為字段Access-Control-Allow-Origin
的響應標頭的一部分
還要確保您的響應具有此字段Access-Control-Allow-Methods
include GET
您提到您的后端 API 代碼啟用了 CORS。 如果上述方法不起作用,您可以更新您的帖子以包括您的設置方式嗎?
我需要將http://
前綴添加到我的localhost:8000
url
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.