[英]CORS issue with react and django-rest-framework
I'm using react on the frontend side and Django on the backend.我在前端使用反应,在后端使用 Django。 I using
django-cors-headers
for managing CORS in my Django app.我在我的 Django 应用程序中使用
django-cors-headers
来管理 CORS。
I have added the package in INSTALLED_APPS
like this:-我在
INSTALLED_APPS
中添加了 package,如下所示:-
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework.authtoken',
'rest_framework',
'corsheaders',
'services',
'feeds',
'knox',
'users',
]
then I have also added same in MIDDLEWARE
然后我也在
MIDDLEWARE
中添加了相同的内容
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
'django.middleware.common.CommonMiddleware',
]
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
ALLOWED_HOSTS = ['*']
and I'm passing CORS headers from my client-side React app like:-我正在从我的客户端React 应用程序传递 CORS 标头,例如:-
const Axios = axios.create({
baseURL: `${BASE_URL}/api`,
timeout: 1000,
headers: {
'X-Custom-Header': 'foobar',
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
}
})
Error on frontend:-前端错误:-
Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/register' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.
Access-Control-Allow-Origin header is sent by server, not by frontend. Access-Control-Allow-Origin header 由服务器而不是前端发送。 Server also does not send this header always.
服务器也不总是发送这个 header。 Whenever client sends origin header, only then server sends Access-Control-Allow-Origin and when origin is not matched, CORS error in thrown.
每当客户端发送源 header 时,服务器才会发送 Access-Control-Allow-Origin 并且当源不匹配时,抛出 CORS 错误。 If you used create-react-app to bootstrap your react project, they have really nice documentation how to configure proxy , that way you dont have to configure CORS on backend.
如果您使用 create-react-app 来引导您的反应项目,他们有非常好的文档如何配置代理,这样您就不必在后端配置 CORS。 In django configuration try to remove ALLOWED_HOSTS = ['*'] line, CORS_ORIGIN_ALLOW_ALL = True should work for all.
在 django 配置中尝试删除ALLOWED_HOSTS = ['*']行, CORS_ORIGIN_ALLOW_ALL = True应该适用于所有人。
there was a bug in my client-side headers 'X-Custom-Header': 'foobar',
after removing it started working fine我的客户端标题
'X-Custom-Header': 'foobar',
删除后它开始正常工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.