Firebase托管Angular2应用GET请求跨域问题求助

我来帮你一步步排查这个跨域问题！看起来核心问题是你配置的CORS头没有覆盖到实际请求的路径，导致浏览器触发了跨域限制。

问题根源 #

你在firebase.json里的headers规则只给index.html添加了Access-Control-Allow-Origin头，但你的AJAX请求是发送到https://url/?a2=123&a1=milla这个路径（并非index.html），所以这个请求并没有获取到所需的CORS头，进而触发了浏览器的跨域拦截。

解决方案 #

1. 调整Firebase Hosting的Headers配置 #

修改firebase.json里的headers规则，让它覆盖你需要跨域的请求路径。如果是所有路径都需要允许跨域，可以用通配符**来匹配：

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "/timestamp",
        "function": "app"
      }
    ],
    "headers": [
      {
        "source": "**", // 匹配所有路径
        "headers": [
          {
            "key": "Access-Control-Allow-Origin",
            "value": "*"
          }
        ]
      }
    ]
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint",
      "npm --prefix \"$RESOURCE_DIR\" run build"
    ]
  }
}

如果你只需要给特定路径（比如根路径带参数的请求）添加CORS头，也可以把source改成"/"，不过**更通用，适合大部分场景。

2. 重新部署Firebase Hosting #

修改配置后，必须重新部署才能让新的规则生效：

firebase deploy --only hosting

3. 特殊情况：如果请求指向Firebase Functions #

如果你的https://url/?a2=123&a1=milla实际是通过rewrites规则指向了Firebase Functions（比如你配置的/timestamp规则），那CORS头需要在云函数代码里设置，而不是Hosting配置。比如Node.js编写的云函数可以这样处理：

const functions = require('firebase-functions');

exports.app = functions.https.onRequest((req, res) => {
  // 设置CORS允许所有来源
  res.set('Access-Control-Allow-Origin', '*');
  // 允许的请求方法（可根据需求调整）
  res.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  // 处理OPTIONS预检请求
  if (req.method === 'OPTIONS') {
    res.status(204).send('');
    return;
  }
  // 处理业务逻辑并返回响应
  res.send('你的响应内容');
});

修改函数代码后，重新部署函数：

firebase deploy --only functions

验证步骤 #

部署完成后，打开浏览器开发者工具（F12）切换到Network面板，重新发送请求，查看响应头里是否包含Access-Control-Allow-Origin: *。如果存在，跨域问题就解决了。

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