基于Express配置AMP跨域资源共享（CORS）问题排查

你已经尝试设置CORS相关头了，但还是遇到了AMP专属的头校验错误，我来帮你梳理几个核心问题和修复方案：

问题根源分析 #

AMP对跨域表单提交有严格的专属要求：除了常规CORS头，必须返回与AMP页面源完全匹配的AMP-Access-Control-Allow-Source-Origin头。你的代码虽然设置了这个头，但可能存在以下几个疏漏：

• OPTIONS预检请求未正确处理：AMP表单提交前会发送OPTIONS预检请求，如果这个请求的响应没带正确的AMP头，浏览器会直接拦截后续POST请求
• Origin头获取不可靠：Firebase Functions的代理环境可能导致req.header('origin')为空或被修改，使得设置的头值不符合AMP的精确匹配要求
• 中间件顺序错误：如果CORS中间件挂载在路由之后，请求会先被路由处理，头还没设置就返回了

修正后的Express配置方案 #

我调整了你的代码，针对性解决了上述问题：

const app = express();

// 务必将这个CORS/AMP头中间件放在所有路由之前
app.use(function (req, res, next) {
  // 手动指定你的AMP网站源（替换成你的Firebase Hosting域名，比如https://your-amp-site.web.app）
  const ampSourceOrigin = "https://your-amp-site.web.app";
  // 兼容请求头里的Origin，兜底用手动指定的源
  const requestOrigin = req.header('origin')?.toLowerCase() || ampSourceOrigin;

  // 设置常规CORS头
  res.set('Access-Control-Allow-Origin', requestOrigin);
  res.set('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  res.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, HEAD, PUT');
  res.set('Access-Control-Allow-Credentials', 'true');
  
  // 关键：AMP要求这个头的值必须精确匹配你的AMP页面源，不能随意转小写或修改
  res.set("AMP-Access-Control-Allow-Source-Origin", ampSourceOrigin);

  // 处理OPTIONS预检请求，直接返回204，无需走后续路由逻辑
  if (req.method === 'OPTIONS') {
    return res.sendStatus(204);
  }

  next();
});

// 你的表单处理路由（必须放在中间件之后）
app.post('/submit-form', (req, res) => {
  // 这里编写表单处理逻辑，比如存储数据到Firestore等
  res.json({ status: 'success', message: '表单提交成功' });
});

额外注意事项 #

• 精确匹配AMP源：AMP-Access-Control-Allow-Source-Origin的值必须和AMP页面的完整源完全一致，包括https://前缀和域名（比如https://my-amp-site.firebaseapp.com），不能加路径或修改大小写
• 重新部署Functions：修改代码后运行firebase deploy --only functions重新部署云函数，确保新配置生效
• 验证响应头：用Chrome开发者工具的Network面板查看POST请求的响应头，确认AMP-Access-Control-Allow-Source-Origin存在且值正确
• 检查表单action-xhr：确保AMP表单的action-xhr属性指向Firebase Functions的正确URL，比如https://us-central1-your-project-id.cloudfunctions.net/app/submit-form

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