解决访问站外图片403(referrer)问题

 我的博客原文：解决访问站外图片403(referrer)问题 

问题

我们在使用站外图片的时候，访问图片403，但是浏览器直接访问图片链接可以打开，这是为什么呢？

原因

http请求体的header中有一个referrer字段，用来表示发起http请求的源地址信息，这个referrer信息是可以省略但是不可修改的，就是说你只能设置是否带上这个referrer信息，不能定制referrer里面的值。服务器端在拿到这个referrer值后就可以进行相关的处理，比如图片资源，可以通过referrer值判断请求是否来自本站，若不是则返回403或者重定向返回其他信息，从而实现图片的防盗链。上面出现403就是因为，请求的是别人服务器上的资源，但把自己的referrer信息带过去了，被对方服务器拦截返回了403。

如何解决

在前端可以通过meta来设置referrer policy(来源策略)，那么referrer有哪些属性参数呢？

属性	描述
no-referrer	不发送引用者信息。
no-referrer-when-downgrade	默认。引用者标头不会被发送到没有 HTTPS 的源。
origin	发送文档的来源（协议、主机和端口）。
origin-when-cross-origin	对于跨源请求：仅发送协议、主机和端口。对于同源请求：还包括路径。
unsafe-url	发送来源、路径和查询字符串（但不包括片段、密码或用户名）。该值被认为是不安全的。

所以针对上面的403情况的解决方法，就是把referrer设置成no-referrer，这样发送请求不会带上referrer信息，对方服务器也就无法拦截了。

单独图片设置

<img src="图片地址"  referrerpolicy="no-referrer"/>

全局设置

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

成功解决！YYDS！今天就介绍到这里啦！ 欢迎在评论区交流。

如果文章对你有所帮助，❤️关注+点赞❤️鼓励一下！博主会持续更新。。。。

往期回顾

 CSS多栏布局-两栏布局和三栏布局

 border边框影响布局解决方案

 css 设置字体渐变色和阴影

css 重置样式表（Normalize.css）

 css实现元素居中的6种方法 

Angular8升级至Angular13遇到的问题

前端vscode必备插件(强烈推荐)

Webpack性能优化

vite构建如何兼容低版本浏览器

前端性能优化9大策略（面试一网打尽）！

vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 vite构建打包性能优化

 vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 ES6实用的技巧和方法有哪些？

 css超出部分显示省略号

vue3使用i18n 实现国际化

vue3中使用prismjs或者highlight.js实现代码高亮

什么是 XSS 攻击？什么是 CSRF？什么是点击劫持？如何防御