使用Firebase Functions动态添加Open Graph元标签时遇CORS错误

嘿，我来帮你搞定这个Facebook分享OG标签的问题，刚好我之前也折腾过类似的场景，给你捋清楚关键点和解决方案：

首先得纠正一个很容易踩的坑：Facebook的分享爬虫根本不会执行页面里的JavaScript，它只会直接抓取服务器返回的初始HTML内容。所以你想在用户触发分享时前端调用函数加OG标签的思路，其实对Facebook分享无效——爬虫看不到你前端动态加的标签，必须在服务器返回的HTML里就包含对应内容的OG标签才行。

接下来针对你不想用全局rewrite的需求，给你两个实用方案：

你可以在Firebase Hosting的配置里，让只有Facebook爬虫的请求才转发到云函数，普通用户访问还是直接加载静态index.html，这样既避免了所有请求走函数的性能损耗，又能满足爬虫的需求。

步骤很简单：

1. 修改firebase.json的rewrite规则，加个User-Agent条件：

{
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "**",
        "function": "generateOGTags",
        "condition": {
          "userAgent": "facebookexternalhit/*"
        }
      },
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

这样只有Facebook的爬虫请求会触发generateOGTags函数，普通用户访问完全不受影响。

2. 写云函数生成带OG标签的HTML：

const functions = require("firebase-functions");
const fs = require("fs");
const path = require("path");

exports.generateOGTags = functions.https.onRequest(async (req, res) => {
  // 从请求里拿你需要的内容标识，比如URL里的id参数
  const contentId = req.query.id;
  // 这里替换成你从数据库/存储拿对应内容的逻辑
  // const targetContent = await fetchContentFromDB(contentId);
  
  // 读取本地的静态index.html文件
  const indexPath = path.join(__dirname, "../public/index.html");
  let html = fs.readFileSync(indexPath, "utf8");
  
  // 生成要插入的OG标签
  const customOGTags = `
    <meta property="og:title" content="这里放分享标题">
    <meta property="og:description" content="这里放分享描述">
    <meta property="og:image" content="这里放分享图片的URL">
    <meta property="og:url" content="${req.protocol}://${req.get("host")}${req.originalUrl}">
  `;
  
  // 把OG标签插到</head>前面
  html = html.replace("</head>", `${customOGTags}</head>`);
  
  // 返回修改后的HTML
  res.set("Content-Type", "text/html");
  res.send(html);
});

如果不想动hosting的rewrite配置，你可以让用户分享的链接直接指向云函数的URL，函数返回带OG标签的HTML，普通用户访问还是用原来的静态页面链接。

比如：

• 普通用户访问：https://你的域名.com/post/123（返回静态index.html）
• 分享按钮生成的链接：https://你的域名.com/generate-og?id=123（指向云函数，返回带OG标签的HTML）

如果确实需要前端调用函数做一些前置操作（虽然对分享来说没必要），那得在函数里配置CORS解决你遇到的跨域错误：

exports.generateOGTags = functions.https.onRequest(async (req, res) => {
  // 配置CORS，生产环境别用*，指定你的前端域名更安全
  res.set("Access-Control-Allow-Origin", "*");
  res.set("Access-Control-Allow-Methods", "GET, POST");
  res.set("Access-Control-Allow-Headers", "Content-Type");
  
  // 处理OPTIONS预检请求
  if (req.method === "OPTIONS") {
    res.status(200).send();
    return;
  }
  
  // 后面就是生成OG标签的逻辑，和方案一一样
});

最后再啰嗦一句：如果你的目标是让Facebook分享显示正确的OG标签，前端调用函数修改DOM完全没用——爬虫不执行JS，一定要让分享链接指向能返回完整OG标签的HTML端点，这才是核心。

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