配置Cross-Origin-Embedder-Policy:require-corp后无法加载Firebase Storage图片

问题根源 #

设置Cross-Origin-Embedder-Policy: require-corp后，浏览器要求所有嵌入资源必须满足以下任一条件：

• 同域资源
• 跨域资源携带Cross-Origin-Resource-Policy: cross-origin/same-site响应头
• 通过CORS加载（需给<img>标签添加crossorigin="anonymous"）

Firebase Storage默认不会返回Cross-Origin-Resource-Policy头，因此触发ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep拦截错误。

核心解决方案：用Service Worker修改响应头 #

通过Service Worker拦截Firebase Storage的图片请求，在响应中注入Cross-Origin-Resource-Policy: cross-origin头，让浏览器允许跨域嵌入资源，无需修改任何<img>标签。

步骤1：创建Service Worker文件 #

在Vue项目的public目录下新建sw.js文件：

self.addEventListener('fetch', (event) => {
  // 仅拦截Firebase Storage的资源请求
  if (event.request.url.startsWith('https://firebasestorage.googleapis.com/')) {
    event.respondWith(
      fetch(event.request).then((response) => {
        // 复制原始响应并添加CORP头
        const modifiedHeaders = new Headers(response.headers);
        modifiedHeaders.set('Cross-Origin-Resource-Policy', 'cross-origin');
        
        return new Response(response.body, {
          status: response.status,
          statusText: response.statusText,
          headers: modifiedHeaders
        });
      })
    );
  }
});

步骤2：在Vue项目中注册Service Worker #

在main.js中添加Service Worker注册逻辑：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(() => console.log('Service Worker 注册成功'))
      .catch(err => console.error('Service Worker 注册失败:', err));
  });
}

步骤3：验证效果 #

运行项目后，打开浏览器开发者工具的Application标签，确认Service Worker已激活；再查看Firebase图片的响应头，确认Cross-Origin-Resource-Policy: cross-origin已存在。

备选方案：后端代理跨域资源 #

如果不想使用Service Worker，可在自有后端搭建简单代理，将Firebase Storage的图片请求转为同域请求。以Node.js为例：

const express = require('express');
const axios = require('axios');
const app = express();

app.get('/firebase-img-proxy', async (req, res) => {
  const imgUrl = req.query.url;
  const response = await axios.get(imgUrl, { responseType: 'stream' });
  response.data.pipe(res);
});

app.listen(3000);

在Vue中使用代理后的链接：/firebase-img-proxy?url=你的Firebase图片完整链接，此时资源变为同域，自动符合COEP要求。

内容的提问来源于stack exchange，提问作者Ho Si Tuan