Http:403禁止错误时，试图加载img SRC与谷歌个人资料的图片

http:403 forbidden error when trying to load img src with google profile pic

本文关键字：SRC img 谷歌 个人资料 加载 Http 禁止 错误      更新时间：2023-09-26

大家好，我正在尝试加载谷歌个人资料图片在我的网站和其他的

我已经做了

var profile = googleUser.getBasicProfile();
profile.getImageUrl()

当我登录谷歌并将图像url保存到数据库时但当我试图将其放入img标签的scr中时，例如

var img = document.createElement("img");
img.src = image;
img.alt = "image";
img.style.float = "left";
divn.appendChild(img);

有时我得到403禁止错误，但有时它工作这是我使用的一个示例链接存储在数据库中只是更改了位

https://lh4.googleusercontent.com/-OmV9386WzGk/AAAAFFFFAAI/AAAAAAAACpc/BEtVNh85tnk/s96-c/photo.jpg

所以我只是想知道如果我做的是正确的获取个人资料图像，它的其他用户也在同一页面

使用referrerpolicy="no-referrer"似乎有所帮助。虽然它在本地主机应用程序中不起作用(在我添加此属性之前)，但它在自己的选项卡中加载图像时始终有效。请求标头的一个不同之处在于没有referer。

添加referrerpolicy="no-referrer"属性

<img src="your-google-link-here" referrerpolicy="no-referrer"/>

查看此处的refererpolicy

唯一有效的方法就是添加

<meta name="referrer" content="no-referrer" />

到我的html的head，如下所示:https://github.com/chakra-ui/chakra-ui/issues/5909

在没有提到任何协议的情况下访问本地主机时出现此错误。如果你的图片无法加载，试着重新打开http://或https://这样问题就解决了

当Referer头被设置为localhost时，看起来谷歌不服务请求。我在检查中将它更改为其他域，重新发送它，它工作了。我甚至可以得到头像的卷曲和零标题

2021同期

如果您在浏览器(chrome)上使用CORS插件，请将其关闭。

关闭插件后，重启浏览器再试一次。

. .这对我有用!

我可以想象URL是在每次请求时动态创建的。这是因为用户需要经过身份验证才能检索该URL。(例如，如果用户退出先前授权的服务/撤销认证，服务应不再能够检索个人资料图片)

因此，要么将整个图像作为blob存储在数据库中，要么进行身份验证并每次使用User Object请求URL。

同时，考虑使用此处引用的API

在MUI <Avatar />组件上渲染用户头像时，我在Next.js应用程序中面临同样的错误。

在_app.js上添加这行后，它得到了修复，图片被正确渲染。

<meta name="referrer" content="no-referrer" />

返回的链接不是动态的。例如，我的头像是这样的:

https://lh3.googleusercontent.com/a-/AAuE7mB9nRJ8QQy4bJ97P2zeqX_5u7bVuS_DzxOsV0u6rlc

我可以看到我的照片，即使在隐身标签，当我注销。

我能够在我的一个项目中解决这个问题，问题是我一直在使用错误的img标签，即<img src"foo.png" />而不是<img src="foo.png></img>。后者适合DOCTYPE=HTML，而前者适用于XHTML页面。

是啊…有一个小技巧可以解决这个问题。把你的标签改成结束标签。显然，这解决了它，但我不确定这是否是一个临时的解决方案。

相关文章：