如何绕过Firebase Hosting无通配符子域名限制实现用户子域名？

问题背景 #

我想让用户在应用主域名下注册子域名，但Firebase Hosting不支持通配符子域名。之前构思了一套近乎自动化的方案：

• 收集用户创建子域名的意向；
• 自动化调用Firebase CLI创建新站点，把DNS配置存到Firestore再展示给用户；
• 上传带<object>标签的简单HTML页面，指向主域名的个人页面app.website/username；
  但卡在了<object>不会改变浏览器URL的问题上。

核心需求是：每个用户在app.website/username有公开个人主页，希望这个页面能在username.app.website访问，同时支持用户把自有域名指向这个子域名，求高效实现方式。

推荐优化方案：云函数代理+通配符DNS #

不用给每个用户单独建Firebase站点，靠云函数做路由转发，搭配DNS配置就能搞定：

1. 通配符DNS配置：去域名服务商后台，把*.app.website的DNS记录指向Firebase Hosting的官方IP（Firebase控制台Hosting页面能查到）。
2. 写云函数做代理：创建一个云函数，解析请求的子域名拿到username，然后代理请求到主域名的个人页面，同时修正HTML里的资源路径避免加载错误。示例代码（Node.js）：

   const functions = require('firebase-functions');
   const fetch = require('node-fetch');
   
   exports.proxyUserSubdomain = functions.https.onRequest(async (req, res) => {
     const host = req.headers.host;
     const username = host.split('.')[0];
     if (!username) return res.status(404).send('无效子域名');
   
     const response = await fetch(`https://app.website/${username}`);
     const html = await response.text();
     // 替换相对路径为绝对路径，防止资源加载失败
     const fixedHtml = html.replace(/src="\//g, `src="https://app.website/`)
                           .replace(/href="\//g, `href="https://app.website/`);
     res.set('Content-Type', 'text/html');
     res.send(fixedHtml);
   });
   

3. Hosting重写规则：在firebase.json里加一条重写规则，把所有子域名的请求转发到上面的云函数：

   {
     "hosting": {
       "rewrites": [
         {
           "source": "**",
           "function": "proxyUserSubdomain",
           "condition": {
             "host": "*.app.website"
           }
         }
       ]
     }
   }
   

4. 自有域名绑定：用户只要把自己的域名CNAME记录指向username.app.website，再在Firebase控制台把这个自定义域名加到Hosting站点就行——批量操作的话，还能通过Firebase API自动化完成。

备选方案：自动化站点创建+重写规则 #

要是你坚持给每个用户单独建站点的思路，可以这么优化：

1. 自动化站点创建：用Firebase Admin API或者CI/CD工具（比如GitHub Actions）自动创建站点，不用手动跑Firebase CLI。
2. 站点重写配置：给每个用户站点设置重写规则，直接代理请求到app.website/username，这样浏览器URL会保持username.app.website；要是想让URL跳转过去，就用301/302重定向。
3. DNS自动化：通过域名服务商的API（比如Cloudflare、GoDaddy的API）自动给用户添加子域名的DNS记录，省得用户手动操作。

原方案的临时修复（不推荐） #

要是想保留<object>的方式，解决URL不变的问题，可以尝试监听<object>内部的导航事件，用history.pushState修改父页面URL，但这种方式容易碰到跨域问题，而且实现起来麻烦，bug多，不建议用。

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