Node.js服务部署Heroku后仅图片上传接口触发CORS跨域错误

安全阿岳

2026-8-27

问题修复方案

图片类上传请求没有任何特殊的CORS配置要求，单独只有上传接口报CORS错误，本质是该接口的响应根本没经过CORS中间件处理，就被服务端/平台直接返回了错误响应，浏览器拿不到带Access-Control-Allow-Origin头的响应，就会抛出你看到的CORS报错，和CORS配置本身无关。

现存代码问题

1. 中间件注册顺序完全混乱

Express 中间件严格按照代码编写顺序从上到下执行，你当前的代码顺序存在致命问题：

把app.all('*')404拦截、全局错误处理中间件写在了生产环境静态资源/前端路由前面，这部分生产环境路由实际上永远不会生效
如果/uploadDesign路由定义写在了404拦截、错误处理中间件后面，这个路由根本不会被匹配，所有请求打过来会直接被404拦截返回，不会走到CORS逻辑
仅引入了body-parser但完全没有注册，也没有配置请求体大小上限，是上传接口报错的核心诱因
生产环境代码用了path.resolve但没有引入path模块，触发500错误时也会返回无CORS头的响应

2. 请求体超限触发未捕获错误

Express 默认的JSON请求体解析上限是100kb，图片转base64后体积会比原文件大1/3，很容易超过这个限制：

当请求体超过解析上限时，解析器会直接抛出413错误，如果错误在到达CORS中间件之前就被抛出，浏览器就会报CORS错误
本地开发时测试图片体积小、无平台层限制，所以不会触发问题

3. Heroku平台层限制触发无CORS头响应

Heroku普通dyno有两个硬限制，上传场景极易触发：

请求默认30秒超时，如果图片上传、转存、处理逻辑耗时超过30秒，Heroku会直接中断连接返回503，这个响应是平台直接返回的，不会经过Node服务，自然没有CORS头
普通dyno单次请求体接收上限是30MB，上传文件超过这个大小会被平台直接返回413错误，同样不会经过服务逻辑

4. 预检请求被拦截

上传请求如果带了自定义头、或者使用非简单请求的Content-Type，浏览器会先发OPTIONS方法的预检请求，如果404拦截先把OPTIONS请求拦了返回错误，也会触发CORS报错。

5. 前端请求头语法错误

当前前端请求的Accept头缺少逗号分隔，会触发部分解析异常。

修复步骤

按顺序调整代码即可解决：

调整中间件顺序，严格按以下优先级注册：

第一优先级放CORS中间件，显式配置域名规则避免预检异常：

// 顶部记得补引入path模块
const path = require('path')

// CORS配置放在所有中间件最前面
app.use(cors({
  origin: process.env.NODE_ENV === 'production' ? '你的前端生产域名' : 'http://localhost:本地开发端口',
  credentials: true
}))
// 显式放行所有OPTIONS预检请求
app.options('*', cors())

紧接着注册body解析中间件，调大请求体上限适配图片上传：

// 不需要额外引body-parser，用Express内置解析器即可
app.use(express.json({ limit: '50mb' }))
app.use(express.urlencoded({ extended: true, limit: '50mb' }))
// 如果用multer处理multipart格式文件上传，把multer配置放在这之后、业务路由之前

然后注册所有业务API路由（包括/uploadDesign接口）

业务路由注册完成后，再写生产环境静态资源、前端通配路由：

if(process.env.NODE_ENV === 'production'){
  app.use(express.static('client/build'));
  app.get('*', (req, res) =>{
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'))
  });
}

最后再写404拦截、全局错误处理中间件

优化上传逻辑避免触发Heroku限制：如果图片处理+转存耗时接近30秒，建议改成客户端直传对象存储的方案，不要经Heroku服务端转发；如果上传文件普遍较大，不要用base64格式传，改用multipart/form-data格式传输减少体积

修正前端请求头：

headers:{
  'Content-Type':'application/json',
  'Accept':'application/json, text/plain, */*'
}

快速定位技巧

打开浏览器F12网络面板，找到报CORS错误的上传请求，查看响应状态码即可快速定位根因：

413：请求体超限，调大解析上限即可
503：Heroku超时，优化上传链路
404：路由顺序错误，调整中间件顺序
500：服务端代码报错，查看服务端日志定位具体错误

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

Node.js服务部署Heroku后仅图片上传接口触发CORS跨域错误

现存代码问题 #

1. 中间件注册顺序完全混乱 #

2. 请求体超限触发未捕获错误 #

3. Heroku平台层限制触发无CORS头响应 #

4. 预检请求被拦截 #

5. 前端请求头语法错误 #

修复步骤 #

快速定位技巧 #