访问图片出现403的解决办法_访问图片403_cc°　　淡忘的博客

方法一：使用 `no-referrer`

这种方案不仅针对图片的防盗链,还可以是其他标签.
在前端页面头部添加一个 meta
<meta name="referrer" content="no-referrer" />
referrer的几种状态
  
<!-- a标签的referrer -->
<a href="http://example.com" referrer="no-referrer|origin|unsafe-url">xxx</a>
<!-- img/image标签的referrer -->
<img referrer="no-referrer|origin|unsafe-url" src="{{item.src}}"/>
<image referrer="no-referrer|origin|unsafe-url" src="{{item.src}}"></image>
方法二：使用images.weserv.nl
 
getImage(url){
	console.log(url);
	// 把现在的图片连接传进来，返回一个不受限制的路径
	if(url !== undefined){
		return url.replace(/^(http)[s]*(\:\/\/)/,'https://images.weserv.nl/?url=');
把图片路径直接传进去,把原来url前面的http:///https://替换或者直接在图片url前加上https://images.weserv.nl/?url=
 如： 
https://images.weserv.nl/?url=http://xxx.jpg
原图片的http://是可以省略的(与上面的getImage函数是一样的结果) 
https://images.weserv.nl/?url=xxx.jpg
                    在写小程序的时候，后端返回一个网址，直接浏览器打开没问题，但是src访问这个网址获取图片，显示会出现403(防止盗链)的错误最开始百度以为是没清缓存，后来发现403是防止盗链（这种设计，是api厂商正常保证自己的服务器不被刷流量）方法一：这种方案不仅针对图片的防盗链,还可以是其他标签.在前端页面头部添加一个meta&lt;meta name="referrer" content="no-...
在浏览器中输入url可以正常访问，但是项目中无法访问，并返回403 Forbidden。一般是因为服务器设置了图片防盗链的原因。
这里我采用了yatessss前辈在vue完成知乎日报web版的解决方案，使用Images.weserv.nl进行缓存图片，并在需要使用图片url的地方进行相应的替换。
一、概念介绍
实现防盗链
要实现防盗链，我们就必须先理解盗链的实现原理，提到防盗链的实现原理就不...
				最近做了一个爬虫项目，需要用img标签展示爬取到的图片信息，发现直接访问地址可以显示但是放入img标签中报403的错误，解决后在此记录。
首先让我们来认识什么是403错误。
什么是 403 forbidden
403 Forbidden是HTTP协议中的一个状态码(Status Code)。可以简单的理解为没有权限访问此站。该状态表示服务器理解了本次请求但是拒绝执行该任务，该请求不该重发给服务器。
所以我们就明白了吧，对方的服务器检查出来我们是异类所以没有给我们权限，我们自然而然就访问不了了啊。
解决方案：
其中困惑了我比较久的是图片链接为什么不见了这个问题。
我曾写过一个Python脚本用于爬取图片，在爬其他网站时一切正常，但一旦尝试爬取Pixiv的图片时就报错HTTP 403。
如果使用浏览器在登录的状态下选择“保存图片至本地”，便可以正常的保存图片，但复制图片的链接来进行下载的话就跳转到403了。
推测是因为Pixiv需要登录，才能够通过这个链接下载图片。
富文本中复制百度百科的一份知识，在项目预览时发现图片显示不出来，报403问题，
图片地址用新网址打开正常显示
原因：403是防止盗链的错误（这种设计，是api厂商正常保证自己的服务器不被刷流量）
方案一：使用no-referrer
在head 中添加
 <meta name="referrer" content="no-referrer" />
防盗链的机制：
通过页面的referrer信息，判断访问者来源，是否本站点，然后对图片等请求作出相应
no-referrer：
				为什么文章列表数据中的好多图片资源请求失败返回 403？
这是因为我们项目的接口数据是后端通过爬虫抓取的第三方平台内容，而第三方平台对图片资源做了防盗链保护处理。
第三方平台怎么处理图片资源保护的？
服务端一般使用 Referer 请求头识别访问来源，然后处理资源访问。
Referer 是什么东西？
扩展参考：了解更多Referer信息请参考链接
Referer 是 HTTP 请求头的一部分，当浏览器向 Web 服务器发送请求的时候，一般会带上 Referer，它包含了当前请求资源的来源页面的地址。服务端
问题： 为什么文章列表数据中的好多图片资源请求失败返回403？
首先我们要知道第三方平台怎么处理图片资源保护的，
服务端一般使用referer 请求头识别访问来源，然后处理资源访问
过程如下：
referer是什么东西呢？
Referer是HTTP请求头的一部分，当浏览器向web服务器发送请求的时候，一般会带上Referer，它包含了当前请求资源的来源页面的地址，服务器一般使用referer请求头识别访问来源，可能以此进行统计比较分析，日志记录以及缓存优化等
怎么解决呢？
				这里写自定义目录标题图片链接403原因解决方案
图片链接403
前阵子在用vue富文本编辑器vue-quill-editor的时候碰见个问题就是用户从文档上直接粘贴过去的图片保存后链接没问题，但页面展示不出来F12打开看，图片链接显示403。
http请求体的header中有一个referrer字段,当一个用户点击当前页面中的一个链接，然后跳转到目标页面时，目标页面会收到一个信息，即用户是从哪个源链接跳转过来的,
之所以会出现从word文档粘贴过来的图片会显示不了，原因在于我们
前端的页面访问时带上
				阿里云oss服务是一种云存储服务，可以用来存储各种格式的文件，包括图片。但在使用过程中，有时候会因为权限问题，导致通过url访问图片时出现403禁止访问或404 Not Found的错误。这时需要采取以下两种方法解决：
1. 配置Bucket权限
通过控制台进入Bucket，点击权限管理，设置存储空间的读取和写入权限。选择公共读取权限，这样即可保证该Bucket中的内容可以被公开访问，包括图片。同时，也可以在存储空间中创建子账号，按需分配权限，仅特定用户或应用可以访问包含图片的文件夹或文件。
2. 使用签名URL
签名URL是指为内容添加一个签名，该签名包含了授权信息和截止时间，使得即便bucket公开读取权限为private，在给定时间以后，也能够使用该URL获取数据，并能够避免恶意的访问攻击。因为签名URL具有时效性和权限控制，所以签名URL方式更加安全可靠。
以上两种方法都可以解决阿里云oss使用url无法访问图片的问题，但签名URL方式更加安全，适用于需要控制访问权限的情况。
方法一：使用 no-referrer

方法二：使用images.weserv.nl

方法一：使用 `no-referrer`

方法二：使用`images.weserv.nl`
