如何解决Report-To header跨域发送Reporting API报告失败问题

DevOps 小满

2026-9-23

问题原因&修复方案

1. 核心错误：中间件执行顺序错误

Express中间件按注册顺序依次执行，你当前将express.json放在cors中间件之前，浏览器发起的CORS预检OPTIONS请求会先被JSON解析中间件处理，无法匹配POST路由直接返回错误，导致后续正式上报请求不会被浏览器发出。

2. 次要错误：cors配置过于简单

默认cors配置没有明确适配CSP上报的请求特性，需要补充允许的请求方法、请求头，以及预检请求缓存配置。

修复后的服务端代码（example-2.com）

// 第一步：先注册cors中间件，放在所有处理逻辑最前面
app.use('/csp-report', cors({
  origin: "*", // 生产环境可以替换为你的业务域名，比如"https://example-1.com"
  methods: ["POST", "OPTIONS"],
  allowedHeaders: ["Content-Type"],
  maxAge: 86400 // 预检请求缓存1天，减少重复OPTIONS请求
}))

// 第二步：再注册JSON解析中间件
app.use(
  '/csp-report',
  express.json({
    type: [
      'application/json',
      'application/csp-report',
      'application/reports+json'
    ]
  })
);

app.post('/csp-report', (req, res) => {
  console.log(req.headers);
  console.log('CSP Violation Timestamp : ' + new Date().getTime());
  console.log(req.body);
  res.status(204).send();
});