React+Express项目npm启动白屏提示Cannot GET /该如何解决？

你遇到的Cannot GET /报错和Cloudinary、MongoDB无关，是React前端打包配置、Express静态资源路由配置错误导致的。

• 你手动编写的HTML文件直接引入了React源码index.js，JSX语法浏览器无法直接解析，且本地绝对路径的资源引用会触发访问限制
• 未对React项目执行打包操作，Express指定的静态资源目录下不存在可运行的编译后前端资源
• Express代码存在多处语法/配置错误：
  • res.sendfile拼写错误，正确方法名为驼峰格式res.sendFile
  • cors配置参数名错误，Credential首字母不能大写，正确为credentials: true
  • 重复加载了两次dotenv配置，可能导致环境变量读取异常
  • 静态资源目录指向错误，没有指向React打包后生成的资源目录

1. 打包React前端项目

• 进入React项目所在的client目录：cd C:/Users/chirag/Downloads/mern-social-media-master/mern-social-media-master/client
• 安装前端依赖（未安装的情况下执行）：npm install
• 执行打包命令：npm run build，执行完成后会在client目录下生成build文件夹，里面就是编译后的可直接运行的前端静态资源
• 你之前手动编写的带本地绝对路径引用的HTML文件可以直接删除，React打包时会自动生成正确的入口HTML

2. 修正Express服务端代码
   首先删除重复的dotenv加载逻辑，仅保留以下配置即可，同时确保你的.env文件存放在服务端根目录，包含正确的MONGODB_URL配置：

const dotenv = require("dotenv");
dotenv.config();

修正cors配置：

const corsOptions = {
  credentials: true,
  origin: true // 生产环境请替换为你的正式前端域名
};

修正静态资源和根路由配置：

// 静态资源指向React打包后的build目录
app.use(express.static("C:/Users/chirag/Downloads/mern-social-media-master/mern-social-media-master/client/build"));

// 所有非API路由统一返回React入口文件，适配前端路由
app.get('*', (req,res) => {
  res.sendFile("C:/Users/chirag/Downloads/mern-social-media-master/mern-social-media-master/client/build/index.html");
})

3. 重启服务验证
   回到服务端根目录执行启动命令：npm start，浏览器访问http://localhost:8080即可正常加载页面。

内容的提问来源于stack exchange，提问作者Chirag Jain