React从Firebase Storage读取MD文件遇CORS问题求助

核心问题 #

用no-cors模式请求会导致浏览器返回opaque响应，完全无法读取文件内容，这是饮鸩止渴的做法。真正的解决方案是给Firebase Storage配置正确的CORS规则。

步骤1：创建CORS配置文件 #

新建cors.json文件，填入以下内容，替换成你自己的域名：

[
  {
    "origin": ["http://localhost:3000", "https://你的生产环境域名.com"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

• origin：允许跨域请求的域名列表，本地开发和生产环境域名都要添加
• method：仅允许GET请求（你只需要读取文件，无需其他方法）
• maxAgeSeconds：浏览器缓存CORS规则的时长，这里设为1小时

步骤2：用Firebase CLI上传配置 #

确保已安装并登录Firebase CLI，执行以下命令（替换成你的存储桶名称，可在Firebase控制台Storage页面找到）：

gsutil cors set cors.json gs://你的存储桶名称.appspot.com

步骤3：修改前端请求代码 #

去掉no-cors等无效配置，用正常异步逻辑获取文件内容：

useEffect(() => {
  const fetchMarkdown = async () => {
    try {
      // 获取文件的下载URL
      const downloadUrl = await getDownloadURL(ref(storage, `markdown/${post.slug}.md`));
      // 发起GET请求获取文件内容
      const response = await fetch(downloadUrl);
      if (!response.ok) throw new Error(`请求失败，状态码：${response.status}`);
      // 读取md文件的文本内容
      const markdownContent = await response.text();
      
      // 这里可将内容存入组件state，比如setContent(markdownContent)
      console.log('markdown内容:', markdownContent);
    } catch (error) {
      console.error('获取文件出错:', error);
    }
  };

  fetchMarkdown();
}, [post.slug]); // 依赖post.slug，确保slug变化时重新请求

注意事项 #

• 配置上传后可能需要等待3-5分钟才会生效，不要急于测试
• 后续新增域名时，需更新cors.json并重新上传配置
• 渲染md内容可使用react-markdown库，安装后直接将markdownContent传入组件即可

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