前端请求网上图片无法显示

以vue3：

在index.html文件中加入:

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

解释：

1.<meta name="referrer" content="no-referrer"/> 是HTML中的一个元标签，它用于控制浏览器在发送HTTP请求时是否包含引用页信息。当设置为 "no-referrer" 时，浏览器将不会发送任何关于当前页面的信息作为HTTP请求的一部分。

这个标签通常用于保护用户的隐私，因为一些网站可能会使用这些信息来跟踪用户的行为。例如，当你从一个网站点击一个链接跳转到另一个网站时，目标网站可以通过检查HTTP请求头中的Referer字段来了解你是从哪个页面跳转过来的。这可能被用来分析用户的兴趣、行为模式等。

然而，有时网站可能需要知道用户是从哪个页面跳转过来的，以便进行统计分析或优化用户体验。在这种情况下，可以使用其他值来设置referrer属性，如 "origin"（只发送来源站点的域名）或 "same-origin"（仅发送同源站点的信息）。

需要注意的是，虽然 <meta name="referrer" content="no-referrer"/> 可以阻止浏览器发送完整的URL，但它不能阻止浏览器发送部分URL信息，比如协议和主机名。此外，某些浏览器可能不支持或不完全遵循此元标签的规则。因此，在使用此标签时，最好进行充分的测试以确保其效果符合预期。

2.在前端请求网上图片时，加上 <meta name="referrer" content="no-referrer"/> 是为了确保浏览器不会发送包含当前页面信息的Referer头。这是因为某些网站可能会使用Referer头来检测和限制来自特定来源的图像请求，以保护其资源不被滥用或未经授权地访问。

当浏览器发送一个HTTP请求获取网络上的图片时，它会将当前页面的URL作为Referer头的值发送给服务器。如果服务器配置了对Referer头的检查，并且不允许来自某些特定来源的请求，那么没有正确设置Referer头的请求可能会被拒绝，导致无法显示图片。

通过设置 <meta name="referrer" content="no-referrer"/>，可以告诉浏览器不要发送任何关于当前页面的信息作为Referer头的值。这样，即使服务器有Referer头的限制，也可以正常加载图片，因为浏览器不会提供任何可能被识别为敏感信息的来源信息。

然而，需要注意的是，不是所有的网站都需要这样的设置，而且在某些情况下，不发送Referer头可能会导致其他问题，比如无法进行跨域资源共享（CORS）等。因此，在使用此标签时，需要根据具体情况进行评估和测试，以确保它不会影响正常的网页功能。