时间戳

首页 > 解决方案 > 来自 Django 服务器的 reactjs 请求时出错（403 错误/CORS）

reactjs - 来自 Django 服务器的 reactjs 请求时出错（403 错误/CORS）

问题描述

我有一个 reactjs 项目，它使用 API 向 django-rest-framework 发出请求。它以前工作正常，但我不确定是什么让它停止工作。

我已经在使用 django-cors-headers。

我的设置.py：

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

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

CORS_ALLOW_ALL_ORIGINS = True

我的 reactjs 请求：

fetch('/api/user/', {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(obj)
})

我在 django 终端中遇到的错误：

Forbidden: /api/user/
[06/Oct/2021 01:15:31] "POST /api/user/ HTTP/1.1" 403 58

reactjs浏览器中的控制台和网络选项卡出错：

// console error:
UserPage.js:65 POST http://localhost:3000/api/user/ 403 (Forbidden)

//network error:
Referrer Policy: strict-origin-when-cross-origin

//Preview in Networks tab:
detail: "CSRF Failed: CSRF token missing or incorrect."

更新 我的 reactjs 终端：

Local:            http://localhost:3000
On Your Network:  http://172.22.192.1:3000

当我使用它打开我的反应项目时，http://172.22.192.1:3000它工作正常，但使用http://localhost:3000它仍然无法发送 POST 请求。

标签： reactjsdjangodjango-rest-frameworkcorsdjango-cors-headers

解决方案

要解决您的问题，您可以在 Django 设置文件中使用CORS_ORIGIN_WHITELIST代替。CORS_ALLOW_ALL_ORIGINS

代替 ：

CORS_ALLOW_ALL_ORIGINS = True

经过 ：

CORS_ORIGIN_WHITELIST = (
    'http://localhost:3000',  # React default port = 3000
    'http://localhost:8000',  # Django default port = 8000
)
# Change the url to suit your needs.

注意：定义CORS_ALLOW_ALL_ORIGINS必须True允许所有来源，但我之前遇到过同样的问题并通过CORS_ORIGIN_WHITELIST解决它来替换它。那就试试吧。

Django CSRF-TOKEN 更新： 此链接可能会解决您关于 csrf_token 的问题

推荐阅读