如何将 React 连接到 Django？

Posted 2023-03-03

【中文标题】如何将 React 连接到 Django？

【英文标题】：How to connect React to Django?

【发布时间】：2021-03-24 06:10:40

【问题描述】：

我使用 reactJS 作为前端，而 Django 在后端。当我从 react 向 Django 发出请求时（react 在 http://127.0.0.1:3000 运行，而 Django 在 http://127.0.0.1:8000 运行），

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/api/categories. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

很可能是由于 CORS 问题而发生的。所以我安装了django-cors-headers 并在我的settings.py 中进行了以下更改：-

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django_cleanup.apps.CleanupConfig',
    'myapp',
    'corsheaders'
]
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',
]
CORS_ALLOWED_ORIGINS = [
    "http://127.0.0.1:3000"
]

但错误仍然存​​在。我怎样才能让它发挥作用？

【问题讨论】：

你试过this吗？

你确定使用http://127.0.0.1:3000 而不是http://localhost:3000。如果您使用后者，尽管它们指向相同的东西，但这是您必须在 CORS_ALLOWED_ORIGINS

中列出的内容

@tim-mccurrach 我正在使用http://127.0.0.1:3000

@AbdulNiyasPM 我试过代理，它也可以，但它只对开发有好处。我需要在生产时解决 CORS 问题

@GaganSingh 你是否也检查过 django 对终端的输出？如果在请求到达 cors 中间件之前出现错误，您也会在浏览器控制台中收到 cors 错误。这是一个长镜头，但只是一个想法。

【参考方案1】：

你用的是什么版本？尝试替换

CORS_ALLOWED_ORIGINS = [
    "http://127.0.0.1:3000"
]

到：

CORS_ORIGIN_WHITELIST = (
    "http://localhost:3000",
    "http://127.0.0.1:3000"
)

或：

CORS_ORIGIN_ALLOW_ALL = True