图像在 Chrome 选项卡上加载正常，但在 React 代码中返回 403

Posted 2023-03-31

【中文标题】图像在 Chrome 选项卡上加载正常，但在 React 代码中返回 403

【英文标题】：Images are loading okay on a Chrome tab, but returning 403 in React code

【发布时间】：2019-05-01 08:34:46

【问题描述】：

我正在开发一个嵌入带有img 标签的图像的 React 应用程序。并且某些图像无法加载并出现 403 错误：

但是，它可以在另一个 Chrome 选项卡上正常加载：

这是检查后的图像标签：

解决办法是什么？

【问题讨论】：

服务器可能有一个referer检查，IOW：它不希望你使用指向该资源的直接链接，但可能自己下载并托管，这样服务器就不会被过度抨击。

作品here.

@Solo Ha.. 图片无法为我加载。

@Keith 我该如何解决？

在新标签页中打开时，控制台出现错误：无法设置推荐人策略：值''不是'no-referrer'，'no-referrer-when- downgrade'、'origin'、'origin-when-cross-origin'、'same-origin'、'strict-origin'、'strict-origin-when-cross-origin' 或 'unsafe-url'。推荐人政策保持不变。

【参考方案1】：

服务器检查浏览器发送的referer，当referer来自不同域时，不会返回图片。

为了防止这种情况，在当前的许多浏览器中，您可以使用img 标签的referrerpolicy 属性来要求浏览器不要发送引用：

<img referrerPolicy="no-referrer" src="https://www.host.net/image.png"  />

MDN on referrerpolicy attribute Browser Compatibility

关于 React 的注意事项：在 React 中使用它时，我发现它只有在 referrerPolicy 属性用大写 P 拼写并且出现在 src 属性之前时才能可靠地工作。

---

请注意，除了技术方面，还有法律方面。链接到不同主机上的资源可能会对损害赔偿责任和知识产权问题产生法律后果。请确保您可以链接到其他主机上的这些资源。

【讨论】：

我检查了新选项卡的网络选项卡，看起来引荐来源网址策略设置为浏览器默认设置，即 no-referrer-when-downgrade。

@technophyle 我已经更新了我的答案。尝试把referrerPolicy属性移到src属性之前，用大写P拼写。

This Fiddle 表明它正在工作。

还要注意，虽然referrer的正确拼写有4个R，但在HTTP头中却是用3个R拼写，如referer。

【参考方案2】：

NineBerry 是正确的，但最佳做法是向托管图像的服务器中的标头添加显式 cross origin resource sharing 权限（假设您拥有该服务器），而不是忽略 referer。

如果您不拥有托管图像的服务器，请遵循 NineBerry 关于合法性的建议。

来自Mozilla CORS docs：

跨域资源共享标准通过添加新的 HTTP 来工作 允许服务器描述源集的标头 允许使用网络浏览器阅读该信息。