使用react-pixelate处理IGDB图片遇CORS错误，原生img标签正常

我在Web应用前端使用react-pixelate库对图片进行像素化处理。当尝试调用游戏数据库API——IGDB提供的图片URL进行像素模糊处理时，出现了CORS错误。

使用react-pixelate的示例代码：

<ImagePixelated
  src={https://images.igdb.com/igdb/image/upload/t_1080p/co2lbd.jpg}
  pixelSize={5}
  width={450}
  height={450}
/>

触发的错误信息：

Access to image at 'https://images.igdb.com/igdb/image/upload/t_thumb/co1rgi.jpg' (redirected from 'http://images.igdb.com/igdb/image/upload/t_thumb/co1rgi.jpg') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

直接使用原生<img>标签则可以正常加载图片：

<img src={'https://images.igdb.com/igdb/image/upload/t_1080p/co2lbd.jpg'} />

请问该问题是否与react-pixelate库有关？

这个问题确实和react-pixelate库的实现逻辑有关。

原生<img>标签加载图片属于跨域资源嵌入，浏览器允许这种行为（不需要目标资源返回CORS头）；但react-pixelate为了实现像素化效果，会把图片加载到Canvas中，再通过Canvas API读取像素数据——这个过程属于跨域资源读取，浏览器会严格校验CORS规则，要求目标资源返回Access-Control-Allow-Origin头，否则就会抛出CORS错误。

可以试试这些解决办法：

• 后端代理：通过自己的后端服务器转发IGDB图片请求，在响应中添加允许当前 origin 的CORS头，前端请求代理后的地址
• 检查IGDB配置：查看IGDB文档，确认是否能通过请求参数或API密钥获取带CORS头的图片链接
• 改用CSS像素化：用image-rendering: pixelated这类纯CSS方案实现像素化效果，不需要读取像素数据，不会触发CORS校验

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