React 和 django-rest-framework 的 CORS 问题

Question

我在前端使用 React，在后端使用 Django。我使用 django-cors-headers 用于在我的 Django 应用程序中管理 CORS。

我在 INSTALLED_APPS 中添加了这样的包：-

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',
]

然后我也在 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 = ['*']

我正在从我的 client-side React 应用中传递 CORS headers，例如：-

const Axios = axios.create({
    baseURL: `${BASE_URL}/api`,
    timeout: 1000,

    headers: { 
        'X-Custom-Header': 'foobar', 
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*'
     }  
})

前端错误：-

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.

Answer 1

Access-Control-Allow-Origin header 是由服务器发送的，不是由前端发送的。服务器也不会总是发送此 header。每当客户端发送源 header 时，只有服务器发送 Access-Control-Allow-Origin 并且当源不匹配时，抛出 CORS 错误。如果你使用 create-react-app 到 bootstrap 你的反应项目，他们有非常好的文档如何配置 proxy，这样你就不必在后端配置 CORS。在 django 配置中尝试删除 ALLOWED_HOSTS = ['*'] 行，CORS_ORIGIN_ALLOW_ALL = True 应该适用于所有人.

Answer 2

我的 client-side headers'X-Custom-Header': 'foobar', 中有一个错误，删除后它开始正常工作

React 和 django-rest-framework 的 CORS 问题

CORS issue with react and django-rest-framework

django

django-rest-framework

reactjs

create-react-app