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

Question

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

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

这是检查后的图像标签：

解决方案是什么？

标签： javascripthtmlreactjshttp-status-code-403

Answer 1

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

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

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

• MDN 关于referrerpolicy 属性
• 浏览器兼容性

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

---

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