尝试使用来自另一个 URL 的图像时使用 create-react-app 的 CORS 问题

Posted 2023-03-04

【中文标题】尝试使用来自另一个 URL 的图像时使用 create-react-app 的 CORS 问题

【英文标题】：CORS issue using create-react-app when trying to use an image from another URL

【发布时间】：2019-08-09 01:47:03

【问题描述】：

我通常使用静态快速服务器创建我的 react 项目，但我想我会给 create-react-app 一个机会。

但是，我在当前项目中遇到了问题。 当尝试在反应代码中使用 img 标签并使用来自另一个站点的 src URL 时，我遇到了 CORS 问题。

“从源 'http://localhost:3000' 访问位于 'http://www.dailygarnish.com/wp-content/uploads/2012/04/IMG_20120414_205845-640x640.jpg' 的图像已被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' 标头。”

这在我创建服务器的应用程序上正常工作，但不适用于 create-react-app

任何建议将不胜感激

【问题讨论】：

这是来自托管图像的服务器的配置，为了解决这个问题，您应该允许您的服务器接收来自 react 应用程序的跨域请求。如果它不是您的服务器，则您无能为力

我在本地机器上的另一个 react 应用程序中测试了相同的图像 URL，它显示正确

【参考方案1】：

尝试将其放入您的 package.json 中，然后重新启动 CRA 开发服务器（必须这样做）：

"proxy": "https://cors-anywhere.herokuapp.com/"

【讨论】：

有趣，它在我的 package.json 中不起作用，但我查看了 cors-anywhere 的文档并将图像 url 放在它后面：cors-anywhere.herokuapp.com/imageUrlHere 在 img 标记 src 然后它正确显示。

嗯，是的。我也一直在使用它来解决一些第三方公共 API 的 CORS 问题。您可以简单地在 API url 前面加上 corseverywhere url，它就可以解决。很高兴它有效！