原理解析:

http请求头中有一个referrer字段,用来表示发起http请求的源地址信息

服务器端在拿到这个referrer值后判断请求是否来自本站

若不是则返回403,从而实现图片的防盗链。

上面出现403就是因为,请求的是别人服务器上的资源,但把自己的referrer信息带过去了,被对方服务器拦截返回了403

在前端可以通过meta来设置referrer policy(来源策略),referrer设置成no-referrer,发送请求不会带上referrer信息,对方服务器也就无法拦截了

// 图片因为源站做了限制,请求数据状态为200,图片渲染时出现403,在html的head里加入以下标签即可。<meta name="referrer" content="no-referrer" />

//如果是uniapp项目,则需要在onLoad()中添加
onLoad() {
            
			// 在uniapp中没有html,用下面方法加入标签
			const oMeta = document.createElement('meta');
			oMeta.name = "referrer";
			oMeta.content = "no-referrer"
			document.getElementsByTagName('head')[0].appendChild(oMeta);
		},

更多推荐