对 django CORS 问题做出反应答案

【问题标题】：React to django CORS issue对 django CORS 问题做出反应
【发布时间】：2021-12-05 05:43:01
【问题描述】：

错误详情

点击按钮时产生了两个请求。

到目前为止我搜索了什么？

Axios blocked by CORS policy with Django REST Framework

CORS issue with react and django-rest-framework

但无济于事

我在做什么？

从 react 向 DJango API 提交 POST 请求

Django 端设置文件

CORS_ORIGIN_ALLOW_ALL = True
ALLOWED_HOSTS = [
    "http://127.0.0.1:3000", 
    "http://127.0.0.1", 
    "http://localhost:3000", 
    "http://localhost"
]
CORS_ORIGIN_WHITELIST = [
    "http://127.0.0.1:3000", 
    "http://127.0.0.1", 
    "http://localhost:3000", 
    "http://localhost"
]

INSTALLED_APPS = [
    ......,
    "corsheaders"
]

MIDDLEWARE = [
    .........,
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
]

响应 axios 请求

function authenticate() {
    let body = {
        "email": "ac",
        "password": "def"
    };
    const headers = {
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json',
    }

    axios.post("http://127.0.0.1:8000/login/", body, {
        headers: headers
    })
    .then(function(response) {
        console.log(response.data);
    })
    .catch(function(error) {
        console.log(error);
    });
}

尝试了另一种使用 fetch 的方法，但无济于事

function authenticate() {
    let body = {
        "email": "hi",
        "password": "pass"
    };
    const headers = {
        'Content-Type': 'application/json',
    }
    fetch("http://127.0.0.1:8000/login", {
        method: "POST", 
        headers: { 
            "Content-Type": "application/json"
        },
        body: JSON.stringify(body)
    })
    .then(function(response) {
        console.log(response.data);
    })
    .catch(function(error) {
        console.log(error);
    });
}

DJango侧法

def Login(request):
    if(request.method == "POST"):
        return JsonResponse({"message" : "Invalid credentials"}, status=401)

【问题讨论】：

尝试在设置文件中添加 CORS_ALLOW_CREDENTIALS = False
尝试将 cors 中间件添加到您的中间件数组的第一个位置并给我反馈，谢谢
如果其他所有内容都被注释掉，CORS_ORIGIN_ALLOW_ALL=True 会做任何事情吗？
没有发生任何变化。同样的错误。如果您需要更多信息，请告诉我。

标签： python reactjs django python-3.9

【解决方案1】：

以下设置适合我

CORS_ORIGIN_ALLOW_ALL = True
ALLOWED_HOSTS = [
    "127.0.0.1", 
]

CORS_ALLOWED_ORIGINS = [
    "http://127.0.0.1", 
]
CORS_ALLOW_CREDENTIALS = False

INSTALLED_APPS = [
    .....
    "corsheaders"
]


MIDDLEWARE = [
    ......
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
]

【讨论】：

该死，我打算建议用更新的字段替换“白名单”字段，并从 allowed_hosts 中删除协议。顺便说一句，您应该尝试设置 CORS_ORIGIN_ALLOW_ALL = False 以确保您允许的来源设置正常工作。
一切都与此设置完美配合。
请添加为使这项工作进行的更改的说明。

【解决方案2】：

尝试删除CORS_ALLOWED_ORIGINS。留下CORS_ORIGIN_ALLOW_ALL = True.
这是我在真实服务器上的设置：

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_HEADERS = [
  'accept',
  'accept-encoding',
  'authorization',
  'content-type',
  'origin',
  'dnt',
  'user-agent',
  'x-csrftoken',
  'x-requested-with']
CORS_ALLOW_METHODS = ['DELETE', 'GET', 'OPTIONS', 'PATCH', 'POST', 'PUT']

【讨论】：

【解决方案3】：

有时会因为 url 模式而发生。请检查 url 格式是否需要在末尾添加斜杠。

尝试使用'login' 而不是'login/'

【讨论】：

同样的错误来了。在末尾删除正斜杠后没有任何变化。

【解决方案4】：

我想，你忘了为你的请求提供 "mode": "cors" 吧？而且您必须在 Preflight 阶段处理浏览器在服务器端发出的“OPTIONS”请求。

“Access-Control-Allow-Origin”标头应由服务器发送作为响应。您在请求中不需要它。

在此处阅读有关“CORS”请求的详细说明：https://javascript.info/fetch-crossorigin

要正确设置 Django，请阅读以下内容：How can I enable CORS on Django REST Framework

【讨论】：

添加方法定义 django 端，我应该如何返回 Access-Control-Allow-Origin 作为响应？
我不是专业的 Django，但看起来它是由 django-cors-headerslib 自动处理的