React注册后跳转登录页失败，遇CORS及白屏问题求助

安全阿岳

2026-7-6

用户注册提交按钮预期跳转至登录页

成功注册后应重定向至http://localhost:3000/signin。前端采用React.js框架，通过npm安装且当前可正常运行。

但实际点击注册提交按钮后出现如下问题：

页面白屏，控制台报错信息见截图。
URL停留在http://localhost:3000/signup
启动时的错误提示表明存在CORS问题。

调试步骤 - 当前核心问题为CORS

对照第38-46行的handleSubmit函数查看控制台错误日志，已排除该函数问题，确认需先修复CORS。本文未贴出完整代码与错误信息，仅保留相关错误截图。
- 完整错误日志截图
页面加载时的控制台错误日志如下：

signup:1
从源地址 'http://localhost:3000' 访问 'https://trick-or-treat-drf-api-09114a4f424d.herokuapp.com/dj-rest-auth/registration/' 的XMLHttpRequest请求被CORS策略阻止：预检请求的响应未通过访问控制检查：请求的资源上不存在 'Access-Control-Allow-Origin' 头。

尝试执行npm install cors，安装成功但仍出现相同CORS错误。
尝试在src/app.js中添加CORS中间件：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

此操作消除了CORS错误，但页面仍白屏，新错误为response.js:43 Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')

完整错误信息如下：

log.js:24 [HMR] 等待来自WDS的更新信号...
response.js:43  未捕获的类型错误：无法读取未定义属性（读取'prototype'）
    在 Object.<anonymous> (response.js:43:1)
    在 ./node_modules/express/lib/response.js (response.js:1169:1)
    在 __webpack_require__ (bootstrap:856:1)
    在 fn (bootstrap:150:1)
    在 ./node_modules/express/lib/express.js (express.js:22:1)
    在 __webpack_require__ (bootstrap:856:1)
    在 fn (bootstrap:150:1)
    在 ./node_modules/express/index.js (index.js:11:1)
    在 __webpack_require__ (bootstrap:856:1)
    在 fn (bootstrap:150:1)
    在 Module.<anonymous> (App.js:17:1)
    在 ./src/App.js (App.js:68:1)
    在 __webpack_require__ (bootstrap:856:1)
    在 fn (bootstrap:150:1)
    在 Module.<anonymous> (index.css:82:1)
    在 ./src/index.js (index.js:24:1)
    在 __webpack_require__ (bootstrap:856:1)
    在 fn (bootstrap:150:1)
    在 1 (utils.js:18:1)
    在 __webpack_require__ (bootstrap:856:1)
    在 checkDeferredModules (bootstrap:45:1)
    在 Array.webpackJsonpCallback [as push] (bootstrap:32:1)
    在 main.chunk.js:1:71
(anonymous) @ response.js:43
./node_modules/express/lib/response.js @ response.js:1169
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
./node_modules/express/lib/express.js @ express.js:22
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
./node_modules/express/index.js @ index.js:11
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
(anonymous) @ App.js:17
./src/App.js @ App.js:68
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
(anonymous) @ index.css:82
./src/index.js @ index.js:24
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
1 @ utils.js:18
__webpack_require__ @ bootstrap:856
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1

将整个中间件放入函数中，报错信息显示express不是函数：

未捕获的类型错误：express不是函数
[...]

尝试将app.use(cors());放入App()函数内，常量保留在导入语句下方，页面仍白屏且出现相同错误：

未捕获的类型错误：无法读取未定义属性（读取'prototype'）

推测需安装express.js才能识别express函数。

按照文档在终端执行npm install express --save安装express.js框架，再次尝试步骤4、5、6，仍出现相同错误。
回退步骤4-7（express.js无帮助）。因无现有Django项目，尝试通过Django启用CORS：执行django-admin startproject corstest创建项目，按照文档将"corsheaders.middleware.CorsMiddleware"加入MIDDLEWARE，"corsheaders"加入INSTALLED APPS，仍出现初始CORS错误。
在settings.py中设置CORS_ALLOW_ALL_ORIGINS = True，问题依旧。
查看React与Django API的连接代码：

const handleSubmit = async (event) => {
      event.preventDefault();
      try {
        // 此处调用后端Django API
        await axios.post("/dj-rest-auth/registration/", signUpData);
        // 注册成功后重定向到登录页
        history.push("/signin");
      } catch (err) {
        // 捕获错误并存入状态用于展示
        setErrors(err.response?.data);
      }
    };

尝试执行python3 manage.py runserver，报错：

[...]
模块未找到错误：找不到名为'corstest.settings'的模块

执行python manage.py startapp corstestapp也出现相同错误。当前剩余问题为如何将安装了django-cors-headers的新Django项目与React正确集成。
查看新创建的corstest/manage.py，发现错误出现在第7-9行：

def main():
    """执行管理任务。"""
    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'corstest.settings')
[...]

链接：

代码仓库：src/pages/auth/signupform.js

参考资料：

《跨源资源共享 (CORS)》，MDN Web Docs
《Access-Control-Allow-Origin》，MDN Web Docs
《如何在React.js中允许CORS？》，Stack Overflow
《React CORS指南：是什么以及如何启用它》，StackHawk

内容的提问来源于stack exchange，提问作者Laurie Crean