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

标签 javascript html reactjs http-status-code-403

我正在开发一个使用 img 标签嵌入图像的 React 应用程序。有些图片没有加载,出现 403 错误:

enter image description here

但是,它在另一个 Chrome 标签页上加载正常:

enter image description here

这是检查后的图像标签:

enter image description here

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

最佳答案

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

为防止这种情况,在当前的许多浏览器中,您可以使用 img 标记的 referrerpolicy 属性来要求浏览器不要发送 referer:

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

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


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

关于javascript - 图片在 Chrome 选项卡上加载正常,但在 React 代码中返回 403,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53536329/

相关文章:

html - 如何在 p 和 h1 标签之间放置边距?

javascript - React Router 重定向错误 404

javascript - 如何使用 yarn 将 NodeJS/React 应用程序部署到 Heroku?

javascript - Perl——如何将新网页滚动到上一行位置

javascript - Windows 8 Metro 应用程序是否提供所有 JavaScript 功能?

javascript - 如何从普通的 javascript 代码写入 Closure Javascript?

javascript - 如果表单无效,是否会调用提交?

javascript - 过滤函数返回未定义

javascript - jQuery DataTable 响应式不适用于 Bootstrap 3

javascript - 如何在 Jquery 多选中选择一个包含其 parent 和 child 的组