Angular项目发送base64截图POST请求时生产环境出现CORS错误如何解决

问题原因 #

1. 重复CORS配置冲突：同时启用cors()中间件与自定义CORS响应头配置，两套规则在生产环境易出现响应头重复、规则覆盖问题，导致浏览器CORS校验失败。
2. OPTIONS预检请求响应不合规：自定义配置中OPTIONS请求返回了JSON格式响应体，部分浏览器对预检请求的响应体有严格限制，带Body的预检响应会被判定为无效，直接触发CORS错误。
3. 大体积请求触发服务端限制：base64格式截图比原二进制体积大33%左右，长请求会触发浏览器预检逻辑，若服务端（含Node服务、上层反向代理如Nginx）配置了请求头/请求体大小上限，请求会被直接拦截，表现为CORS错误。
4. 生产环境代理配置缺失：本地调试时通常会启用Angular开发代理规避跨域，生产环境部署后无对应代理配置，直接请求跨域域名时因服务端CORS配置异常导致校验失败。

修复方案 #

1. 清理重复CORS配置 #

保留一套CORS规则即可，推荐直接使用cors()中间件统一配置，删除自定义的CORS中间件，配置示例如下：

app.use(cors({
  origin: '*',
  allowedHeaders: ['Origin', 'X-Requested-With', 'Content-Type', 'Accept', 'Authorization'],
  methods: ['PUT', 'POST', 'PATCH', 'DELETE', 'GET'],
  optionsSuccessStatus: 204 // 预检请求返回204无内容，符合浏览器规范
}))

2. 优化大文件传输逻辑 #

将base64格式截图转为Blob对象，通过FormData格式传输，降低请求体积，同时避免大字符串JSON序列化的性能损耗，前端Angular代码修改示例：

generateSignature(signatureBase64: string) {
  // base64转Blob逻辑
  const [header, content] = signatureBase64.split(',');
  const mimeType = header.match(/:(.*?);/)?.[1] || 'image/png';
  const byteCharacters = atob(content);
  const byteNumbers = new Array(byteCharacters.length);
  for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
  }
  const byteArray = new Uint8Array(byteNumbers);
  const signatureBlob = new Blob([byteArray], { type: mimeType });

  // 构造FormData
  const formData = new FormData();
  formData.append('signature', signatureBlob, 'screenshot.png');

  // 不用手动设置Content-Type，浏览器会自动带FormData对应的boundary
  return this.http.post(this.url + 'generateSignature', formData)
    .toPromise()
    .then(res => res as any);
}

3. 调高服务端请求体积上限 #

• Express服务端调整bodyParser配置：

app.use(express.json({ limit: '10mb' })); // 可根据实际截图大小调整上限
app.use(express.urlencoded({ limit: '10mb', extended: true }));

• 若生产环境使用Nginx反向代理，需在Nginx配置对应server块中添加：

client_max_body_size 10M;

4. 可选：生产环境用反向代理规避CORS #

若前端与服务端部署在同一域名下，可通过Nginx配置路径转发，彻底规避跨域问题：将/api前缀的请求转发到后端服务，前端请求路径调整为相对路径/api/generateSignature即可。

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