MERN Todo应用CORS跨域与404路由问题求助

一、初始CORS策略阻止错误修复 #

你的后端CORS配置存在逻辑错误，同时前端API地址的判断逻辑也有问题，导致跨域请求被拦截。

1. 修复后端CORS配置 #

在backend app.js的cors配置中，origin数组的写法错误，"http://127.0.0.1:5174" || "http://localhost:3000" 会因为第一个字符串非空，永远只取前者，无法正确兼容多个前端地址。修改为：

app.use(
  cors({
    origin: [process.env.FRONTEND_URL, "http://localhost:3000"],
    methods: ["GET", "POST", "PUT", "DELETE"],
    credentials: true,
  })
);

确保你在render的环境变量中设置了FRONTEND_URL=http://localhost:5174，这样同时允许本地开发的前端地址和生产环境的前端地址（如果有）。

2. 修复前端API地址判断 #

前端main.jsx中的server常量判断逻辑错误，第一个字符串非空时永远不会使用本地地址，应该根据环境动态切换：

// 前端main.jsx
export const server = process.env.REACT_APP_API_URL || "http://localhost:3000/api/v1";

在前端项目根目录创建.env文件，添加：

REACT_APP_API_URL=https://mern-todoapp-bc0e.onrender.com/api/v1

这样开发时如果没有设置环境变量，会自动使用本地后端地址；生产打包后会使用render的API地址。

二、修改server后出现的404错误修复 #

你将前端server改为http://localhost:3000/api/v1后，前端会请求本地的后端服务，但你的后端部署在render平台，本地并没有启动对应的后端服务，因此出现404错误。

解决方法：

• 保持前端server指向render的API地址（即https://mern-todoapp-bc0e.onrender.com/api/v1），同时按照上面的步骤修复后端的CORS配置，确保允许http://localhost:5174的跨域请求。
• 如果需要本地开发调试，可以在本地启动后端服务，此时前端使用http://localhost:3000/api/v1作为API地址，同时后端CORS配置中保留http://localhost:5174。

内容的提问来源于stack exchange，提问作者Pankaj Gupta