反应和 django-rest-framework 的 CORS 问题答案

【问题标题】：CORS issue with react and django-rest-framework反应和 django-rest-framework 的 CORS 问题
【发布时间】：2020-08-10 04:19:18
【问题描述】：

我在前端使用 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 = ['*']

我正在从我的 客户端 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': '*'
     }  
})

前端错误：-

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 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.

标签： django reactjs django-rest-framework create-react-app

【解决方案1】：

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

【讨论】：

嗨@gautamits，感谢您的回复。我尝试删除 ``` ALLOWED_HOSTS = ['*'] ``` 仍然在我的前端收到 CORS 错误。另外，我浏览了 CRA 的文档代理文档，它只适用于开发服务器。我需要这个用于开发和生产
请尝试使用带有 Origin 标头的 CURL 访问您的 api。检查服务器是否真的发送任何 Access-Control-Allow-Origin。

【解决方案2】：

在我的客户端 headers'X-Custom-Header': 'foobar', 中存在一个错误，删除后它开始正常工作

【讨论】：