Heroku部署后Node.js Multer上传失败，CORS报错排查求助

可能的原因及对应解决方案 #

1. CORS中间件未正确配置生产环境前端域名 #

默认的cors()虽然会允许所有Origin（*），但在处理复杂请求（比如文件上传这类multipart/form-data请求）时可能存在兼容性问题，更稳妥的方式是明确指定生产环境前端的实际域名：

修改后端CORS配置：

const corsOptions = {
  origin: process.env.FRONTEND_URL || "http://localhost:3000", // 替换为你的前端Heroku域名
  credentials: true // 若请求携带凭证（如cookie）需开启
};
app.use(cors(corsOptions));

之后在Heroku后台配置环境变量FRONTEND_URL，值为你的前端应用实际域名（例如https://your-frontend-app.herokuapp.com）。

2. Heroku临时文件系统导致Multer存储目录缺失 #

Heroku的文件系统是临时的，部署时如果public/files目录不存在，Multer尝试写入文件会抛出错误，此时错误响应可能未经过CORS中间件处理，导致浏览器报CORS错误。

解决方法：

• 启动后端时自动创建存储目录：

const fs = require("fs");
const uploadDir = path.join(__dirname, "public/files");
if (!fs.existsSync(uploadDir)) {
  fs.mkdirSync(uploadDir, { recursive: true });
}

• 或改用Multer内存存储（适合临时文件，注意内存限制）：

const storage = multer.memoryStorage();
const upload = multer({ storage: storage }).array("file");

3. 后端中间件顺序错误 #

确保cors()中间件在所有路由和其他中间件之前加载，保证所有请求都能经过CORS处理：

// 正确加载顺序
const cors = require("cors");
app.use(cors(corsOptions)); // 先加载CORS中间件
app.use(express.json()); // 其他中间件后置
app.use("/files", express.static(path.join(__dirname, "public/files")));
// 最后挂载路由
app.post("/upload", ...);

4. 后端部署异常或请求地址错误 #

• 确认前端请求的后端URL（https://shoushapi.herokuapp.com/upload）拼写正确，后端应用在Heroku上处于正常运行状态。
• 通过heroku logs --tail命令查看后端日志，排查是否有启动错误或上传时的异常信息，日志能直接定位问题根源。

5. 浏览器缓存旧CORS规则 #

浏览器可能缓存了之前的CORS响应，尝试清除浏览器缓存或使用无痕模式测试。

内容的提问来源于stack exchange，提问作者Zain Mashaqba