对 django CORS 问题做出反应

Question

错误详情

单击按钮时生成了两个请求。

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

Axios blocked by CORS policy with Django REST Framework

但无济于事

我在做什么？

正在向 DJango 提交 POST 反应请求 API

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

React 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)

Answer 1

有时是因为 url 模式。请检查 url 模式末尾是否需要斜杠。

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

Answer 2

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

"Access-Control-Allow-Origin" header 应由服务器作为响应发送。您不需要它。

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

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

Answer 3

以下设置适合我

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

Answer 4

尝试删除 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']

对 django CORS 问题做出反应

React to django CORS issue

python

django

reactjs

python-3.9