调用外部链接,报403错误
背景:在开发一个视频播放项目中video_ts(一个用typescript开发的视频播放器)中调用MP4 资源的时候,无法播放,报403错误。然而直接在浏览器地址栏回车则可以正常播放。
报403错误则是访问被拒绝,既然我做了跨域处理还被拒绝这里就要提及浏览器的防盗链机制。
防盗链机制
当你的项目和需要访问的地址不在同一个域内,这时浏览器的防盗链机制就发挥作用了。其中防盗链是利用 HTTP header 中的 referer 来实现的。当浏览器向服务器发送请求时会带上 referer ,来告诉服务器从哪个页面链接过来的。
服务器通过识别 referer 来判断请求是否是自己的域名,如果不是自己的域名就会拦截,不会将请求发送出去,如果是自己域名就可以继续访问。
请求发送成功的请求头:
image.png请求未发送成功的请求头:(会有Referer字段)
image.png
解决方法
这里我采用的是比较暴力的方法,直接在标签里加 meta
<meta name="referrer" content="never">
在某些情况网站想要控制页面发送给服务器的 referer 信息时,可以使用 referer metadata 参数。
referer 的 metadata 属性可以设置 content 属性值为以下:
default
never
always
origin
default :若当前页面使用的是 https 协议,而正要加载资源使用的是普通的 http 协议,则将 http header 中的 referer 置空;
never :删除 http header 中的 referer,所有从当前页面发起的请求将不会携带 referer;
always :不改变 http header 中的 referer 的值;
origin :只发送 origin 部分;
网友评论