Vue应用渲染Firebase PhotoURL时出现间歇性CORS错误

问题原因 #

谷歌用户头像的CDN节点部分未正确配置CORS响应头，导致前端加载时间歇性触发跨域错误。

解决方案 #

方案1：通过Firebase云函数代理头像请求

自建代理转发头像请求，确保返回正确的CORS头：

1. 在Firebase项目中创建云函数（Node.js示例）：

const functions = require("firebase-functions");
const axios = require("axios");
const cors = require("cors")({ origin: true });

exports.proxyAvatar = functions.https.onRequest((req, res) => {
  return cors(req, res, async () => {
    try {
      const { url } = req.query;
      if (!url) return res.status(400).send("Missing avatar URL");
      
      const response = await axios.get(url, { responseType: "arraybuffer" });
      res.set("Content-Type", response.headers["content-type"]);
      res.send(response.data);
    } catch (error) {
      res.status(500).send("Failed to fetch avatar");
    }
  });
});

2. 部署云函数后，前端修改头像地址：

<v-img 
    v-if="authStore.user?.photoURL" 
    :src="`https://你的云函数域名/proxyAvatar?url=${encodeURIComponent(authStore.user.photoURL)}`"
></v-img>
<v-icon 
    v-else 
    icon="mdi-account"
></v-icon>

方案2：将头像缓存到Firebase Storage

用户登录成功后，把谷歌头像同步到自己的Storage，后续用Storage的URL展示：

1. 登录成功后添加缓存逻辑：

import { getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage";
import axios from "axios";

async function cacheUserAvatar(user) {
  if (!user.photoURL) return;
  const storage = getStorage();
  const avatarRef = ref(storage, `user-avatars/${user.uid}`);
  
  // 先检查是否已缓存
  try {
    const url = await getDownloadURL(avatarRef);
    return url;
  } catch {
    // 未缓存则下载并上传
    const response = await axios.get(user.photoURL, { responseType: "blob" });
    await uploadBytes(avatarRef, response.data);
    return getDownloadURL(avatarRef);
  }
}

// 登录成功后调用，更新store中的头像URL
authStore.updateUserAvatar(await cacheUserAvatar(user));

2. 前端直接使用缓存后的Storage URL：

<v-img 
    v-if="authStore.user?.cachedAvatarURL" 
    :src="authStore.user.cachedAvatarURL"
></v-img>
<v-icon 
    v-else 
    icon="mdi-account"
></v-icon>

方案3：修改谷歌头像URL格式（临时应急方案）

部分场景下，给谷歌头像URL添加尺寸参数或更换子域名可规避CORS问题：

<v-img 
    v-if="authStore.user?.photoURL" 
    :src="authStore.user.photoURL.replace('lh3.googleusercontent.com', 'lh4.googleusercontent.com') + '?sz=200'"
></v-img>

注：此方案不保证长期有效，仅作为临时手段使用。

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