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

Question

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

但是，它可以在另一个 Chrome 标签上正常加载：

这是检查后的图像标签：

解决这个问题的方法是什么？

Answer 1

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

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

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

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

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

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