从Firestore获取图片遇CORS错误，配置规则后仍未解决

你的核心问题是配置错了对象：你给自己的Google Cloud Storage（GCS）桶设置了CORS规则，但实际请求的图片资源来自https://example.io，两者完全不相关，所以你的配置根本不会生效。

正确的解决路径分两种情况： #

• 如果你能控制example.io域名：
  • 直接在该域名的服务器（比如Nginx、Apache或后端服务）上添加CORS响应头：Access-Control-Allow-Origin: http://localhost:5000
  • 如果是CDN托管的资源，在CDN控制台的CORS设置中添加允许http://localhost:5000的规则
• 如果你无法控制example.io域名：
  • 本地搭建反向代理服务器，将图片请求转发到代理，由代理添加CORS头（示例代码见下方）
  • 用自己的后端接口做中转：前端请求后端接口，后端去拉取example.io的图片再返回给前端（浏览器不会对后端请求做CORS限制）

额外纠正你之前的GCS配置错误（如果以后需要配置自己桶的CORS）： #

GCS的CORS规则中，origin必须是完整的协议+域名+端口，比如http://localhost:5000，而不是只写localhost:5000，GCS对origin的匹配是严格的。

简单Node.js代理示例 #

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();

app.use('/icons', createProxyMiddleware({
  target: 'https://example.io',
  changeOrigin: true,
  onProxyRes: (proxyRes) => {
    proxyRes.headers['Access-Control-Allow-Origin'] = 'http://localhost:5000';
  }
}));

app.listen(3000, () => {
  console.log('代理服务器运行在3000端口');
});

之后前端请求图片的地址改成http://localhost:3000/icons/AWS/Res_Amazon-Redshift_Dense-Compute-Node_48.svg即可绕过CORS限制。

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