使用Express提供静态文件时遭遇CORP跨源资源策略错误

问题原因 #

你配置的cors中间件主要处理API请求的CORS跨域头，但Express的express.static默认不会为静态文件添加Cross-Origin-Resource-Policy头，这导致浏览器拦截了跨域加载的静态资源。

解决方案 #

1. 为静态文件添加CORP响应头

修改静态文件托管配置，通过setHeaders选项手动设置CORP头：

const path = require('path');
const express = require('express');
const cors = require('cors');
const app = express();

// 确保cors中间件在静态文件之前加载
app.use(cors({ origin: '*' }));

// 托管静态文件并设置CORP头
app.use('/uploads/users/images', express.static(path.join(__dirname, 'uploads', 'users/images'), {
  setHeaders: (res, filePath) => {
    // 允许所有跨域访问该资源
    res.setHeader('Cross-Origin-Resource-Policy', 'cross-origin');
    
    // 可选：仅针对图片文件设置（按需调整）
    const fileExt = path.extname(filePath);
    const allowedExts = ['.jpg', '.jpeg', '.png', '.gif', '.webp'];
    if (allowedExts.includes(fileExt)) {
      res.setHeader('Cross-Origin-Resource-Policy', 'cross-origin');
    }
  }
}));

// 后续路由定义
// ...

2. 确认中间件加载顺序

确保app.use(cors(...))的调用在所有静态文件托管和路由定义之前，保证CORS规则覆盖所有请求（包括静态资源的预检请求）。

CORP头取值说明 #

• cross-origin：允许任何域跨域加载资源，适配你的场景
• same-origin：仅允许同源访问
• same-site：仅允许同站点请求访问

根据业务需求选择合适的取值即可。

内容的提问来源于stack exchange，提问作者Luis Carlos Cruz Castillo