DigitalOcean部署MERN栈应用时CORS请求失败问题排查

云上老周

2026-8-30

问题根因

这个报错和本地代码逻辑无关，三个核心问题导致部署后异常：

前端代码写死http://localhost:8000作为请求地址是最核心的错误。localhost是本地回环地址，仅在代码运行的设备自身指向本机：本地开发时你的浏览器和后端都在个人电脑上，请求能正常打到本地后端；但部署到DigitalOcean后，前端代码是在访问者的浏览器里运行的，此时代码里的localhost指向访问者自己的设备，根本不会把请求发到你的云服务器，自然拿不到带CORS头的响应，直接触发报错。把地址换成0.0.0.0没有任何作用——0.0.0.0是服务端绑定监听地址用的特殊标识，不能作为客户端请求的目标地址。
后续添加的Express静态资源托管配置存在语法错误：res.sendFile()必须传入具体文件的完整路径，你只传了build目录路径，根本无法正确返回前端入口文件，静态托管逻辑完全没生效。
手写的CORS中间件存在逻辑遗漏：没有处理OPTIONS预检请求，且如果中间件放在路由后面注册，会完全不生效。

修复步骤

按顺序操作即可解决问题，优先选同域部署方案，从根源避免CORS问题：

修正前端请求地址
把Axios里写死的绝对地址改成相对路径：
```
await Axios.get("/api").then(         
  (response) =>{
    setListOfArticles(response.data);
    setIsLoading(false)
  },
)
```
本地开发时如果用create-react-app搭建的项目，直接在package.json里加一行"proxy": "http://localhost:8000"，本地开发时请求会自动转发到本地后端，不用来回切换地址。

修正Express静态托管配置
把原来错误的静态资源配置替换成如下代码，注意静态资源配置要放在所有接口路由之前，前端路由兜底规则要放在所有接口路由之后：

const path = require('path')
// 托管前端打包后的静态资源
app.use(express.static(path.join(__dirname, '../front/build')))

// 这里写你所有的后端接口路由，比如/api开头的接口
// app.get('/api', (req, res) => res.json({...}))

// 前端路由兜底，所有非接口请求都返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../front/build', 'index.html'))
})

配置完成后不需要单独启动3000端口的React前端服务，直接启动Express服务即可，访问Express监听的端口就能拿到前端页面。

检查服务绑定与防火墙规则
1. 确认Express服务启动时监听的是0.0.0.0:8000，不要绑定127.0.0.1:8000，否则外部流量无法访问服务
2. 去DigitalOcean云控制台的防火墙配置页，放开服务监听端口的入站规则
3. 检查服务器内部的ufw/firewalld防火墙，放开对应端口的访问权限
（可选，仅分端口部署时需要）修正CORS配置
如果坚持前后端分端口部署，不要手写CORS中间件，直接安装官方维护的cors包，在所有路由最前面注册：
安装命令：npm install cors
配置代码：
```
const cors = require('cors')
// 调试阶段可以临时放开所有来源，正式环境建议替换为前端实际访问域名
app.use(cors({ origin: "*" }))
```

内容的提问来源于stack exchange，提问作者Nikolay Patarov