尝试使用谷歌个人资料图片加载 img src 时出现 http:403 禁止错误

Posted 2023-02-23

【中文标题】尝试使用谷歌个人资料图片加载 img src 时出现 http:403 禁止错误

【英文标题】：http:403 forbidden error when trying to load img src with google profile pic

【发布时间】：2017-03-26 23:46:45

【问题描述】：

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

我已经完成了

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

当我使用 google 登录并将图像 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

所以我只是想知道我是否正确地获取了个人资料图片，并且其他用户也在同一页面上

【问题讨论】：

3 年后.. 我面临同样的问题.. 你有没有找到解决方案？

哇。 2017 年 3 月，仍然有这个问题。如果我弄清楚了，我会回答这个问题。我真的希望能够使用 Google 登录。

同样的问题 .. 2018 .. 这与从本地主机服务有关吗？

我也有同样的问题。我正在使用 Firebase 身份验证并返回图片网址。有时会出现 403 错误。

2020 同样的问题，现在我使用的是 127.0.0.1 而不是 localhost，并且工作正常

【参考方案1】：

使用referrerpolicy="no-referrer" 似乎有帮助。虽然它在 localhost 应用程序中不起作用（在我添加此属性之前），但在将图像加载到自己的选项卡中时它始终如一地工作。请求标头的差异之一是缺少referer。

【讨论】：

我也有同样的问题。在我的代码中，我实际上在哪里“使用”referrerpolicy="no-referrer"？我使用firebase来响应通过谷歌登录登录。 thnx 对此有任何帮助！

如果您单击答案中的链接，它会将您带到 IMG 元素的属性列表。只需将 referrerpolicy="no-referrer" 添加到使用 googleusercontent.com 的图像元素中

谢谢。完美运行

【参考方案2】：

在没有提及任何协议的情况下访问 localhost 时出现此错误。如果您的图像未加载，请尝试重新打开网站并提供 http:// 或 https:// 这应该可以解决问题

【讨论】：

这是正确的。为了测试这一点，我启动了一个 ngrok.io 隧道，并且图像正在通过隧道加载，即使它在 localhost 中不起作用。

【参考方案3】：

当 Referer 标头设置为 localhost 时，Google 似乎不提供请求。 我在检查中将它更改为其他域，重新发送它并且它有效。 我什至可以得到带有卷曲和零标题的个人资料图片。

【参考方案4】：

我可以想象，每次请求时都会动态创建 URL。用户需要经过身份验证才能检索that URL 的事实支持了这一点。 （例如，如果用户退出先前授权的服务/撤销身份验证，则服务应该不再能够检索个人资料图片）

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

另外，请考虑使用引用 here 的 API。

【讨论】：

该 URL 不是动态的。请检查我上面的答案

【参考方案5】：

2021 年同一期

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

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

.. 它对我有用！

【参考方案6】：

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

【参考方案7】：

是的...有一个小技巧可以解决这个问题。只需将您的标签更改为结束标签，.显然，这解决了它，但我不确定这是否是一个临时解决方案。

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案8】：

发回的链接不是动态的。例如我的头像是这张：

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

即使在隐身标签中和我已注销时，我也可以看到我的照片。