如何解决Firebase Hosting的CORS阻塞问题？

浏览器同源策略限制了前端直接请求第三方域名资源，所以你需要用Firebase云函数做后端代理——让云函数去请求用户的站点地图，再把结果返回给前端，绕开CORS限制。具体操作步骤如下：

1. 初始化Firebase云函数（未初始化过的话） #

打开终端，进入你的Firebase项目根目录，执行：

firebase init functions

按提示选择JavaScript（步骤更简洁），同意初始化配置，完成后会生成functions目录。

进入functions目录，安装请求依赖（比如axios）：

cd functions
npm install axios

2. 编写代理云函数 #

打开functions/index.js，替换原有代码为以下内容：

const functions = require("firebase-functions");
const axios = require("axios");

// 代理抓取站点地图的云函数
exports.fetchSitemap = functions.https.onRequest(async (req, res) => {
  // 设置CORS头，仅允许你的前端域名访问
  res.set("Access-Control-Allow-Origin", "https://app.mywebsite.com");
  // 允许必要的请求方法和头
  res.set("Access-Control-Allow-Methods", "GET, OPTIONS");
  res.set("Access-Control-Allow-Headers", "Content-Type");

  // 处理浏览器的OPTIONS预检请求
  if (req.method === "OPTIONS") {
    res.status(204).send("");
    return;
  }

  try {
    // 从前端获取要抓取的站点地图URL
    const sitemapUrl = req.query.url;
    if (!sitemapUrl) {
      return res.status(400).send("缺少站点地图URL参数");
    }

    // 云函数后端请求第三方站点地图
    const response = await axios.get(sitemapUrl, {
      responseType: "text" // 保留XML文本格式
    });

    // 返回XML内容给前端
    res.set("Content-Type", "application/xml");
    res.status(200).send(response.data);
  } catch (error) {
    functions.logger.error("抓取站点地图失败:", error);
    res.status(500).send("抓取站点地图失败，请检查URL是否有效");
  }
});

3. 部署云函数 #

回到项目根目录，执行部署命令：

firebase deploy --only functions

部署完成后，会得到云函数的访问URL，格式类似https://us-central1-你的项目ID.cloudfunctions.net/fetchSitemap

4. 修改前端代码，通过代理请求 #

原来直接用get-sitemap-links请求第三方URL的代码需要调整，改为先请求云函数代理，拿到XML内容后再解析：

import getSitemapLinks from 'get-sitemap-links';

async function fetchUserSitemap(userSitemapUrl) {
  // 编码URL避免特殊字符问题
  const encodedUrl = encodeURIComponent(userSitemapUrl);
  // 替换成你的云函数URL
  const proxyUrl = `https://us-central1-你的项目ID.cloudfunctions.net/fetchSitemap?url=${encodedUrl}`;

  try {
    const response = await fetch(proxyUrl);
    const xmlContent = await response.text();
    // 用get-sitemap-links解析XML内容
    const links = getSitemapLinks(xmlContent);
    return links;
  } catch (error) {
    console.error("处理站点地图失败:", error);
    throw error;
  }
}

注意事项 #

• 生产环境不要把Access-Control-Allow-Origin设为*，仅允许你的前端域名（比如https://app.mywebsite.com），避免安全风险。
• 如果get-sitemap-links不支持直接传入XML文本，可参考包文档将内容转为可读流或临时URL后再传入。
• 云函数要覆盖异常场景，比如第三方站点无法访问、URL格式错误等，给用户明确提示。

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