Next.js v13+Firebase部署Vercel后site.webmanifest CORS错误求助

以下是针对性的解决步骤，按顺序排查：

1. 修正manifest的引用路径 #

检查HTML中的manifest链接，避免使用完整域名的绝对路径，改用相对路径：

<link rel="manifest" href="/site.webmanifest" />

用完整域名可能会让浏览器误判为跨域请求，即使域名一致也可能触发CORS检查。

2. 通过Next.js配置添加响应头 #

在项目根目录的next.config.js中添加静态资源的头信息配置，确保manifest文件返回正确的CORS和MIME类型：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        // 匹配manifest文件路径
        source: '/site.webmanifest',
        headers: [
          {
            key: 'Access-Control-Allow-Origin',
            value: 'https://example.com', // 建议指定你的域名，而非*
          },
          {
            key: 'Content-Type',
            value: 'application/manifest+json', // 确保MIME类型正确
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

修改后重新部署到Vercel。

3. 在Vercel后台直接配置响应头 #

如果Next.js的配置未生效，可直接在Vercel项目后台设置：

• 进入Vercel项目 → Settings → Headers → Add Header
• 填写参数：
  • Source: /site.webmanifest
  • Key: Access-Control-Allow-Origin
  • Value: https://example.com（或*）
  • 额外添加一条Header：Key为Content-Type，Value为application/manifest+json

4. 若manifest存储在Firebase Storage #

如果你的site.webmanifest是放在Firebase存储中，需要配置Storage的CORS规则：

1. 创建cors.json文件，内容如下：

[
  {
    "origin": ["https://example.com"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

2. 使用Firebase CLI执行命令上传规则：

firebase storage:rules:upload cors.json --bucket your-bucket-name

5. 清除浏览器缓存测试 #

修改配置后，强制刷新页面（Ctrl+Shift+R）或使用无痕模式访问，避免旧缓存导致的问题。

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