前端解决防盗链

2020-04-20

当在页面引入网络图片url,却请求失败,进行分析发现防盗链并了解解决方法

防盗链浅谈

  由于利用百度新闻请求接口,导致部分图片请求失败,状态码403,服务被拒绝。   之前一直用python写爬虫,所以很自然的就想到了伪装请求头。   于是乎想到解决该问题的第一种方法就是创建vue.config.js 在里面配置代理   现在是学前端,当然也要了解些前端解决的办法有哪些:
1.  在meta标签里使用
  ```html5
    <meta name="referrer" content="never">
  ```
  参数集合及其作用:
    never      删除http header种的referer
    default    如果当前页面使用https协议,而正要加载资源使用http协议,则将http header中referer置为空
    origin     只发送origin部分
    always     不改变http header中referer的值
2.  iframe框架引用

http和https是什么?区别是什么? 首先应该知道OSI七层模型,它是有ISO制定的规则,但众多网络设备制造商认为这种划分不合理,都不采用, 而TCP/IP模型,慢慢成为了主流。它分为5层,自顶向下是 应用层 > 传输层 > 网络层 > 数据链路层 > 物理层 (当然也有人把 数据链路层和物理层划到一起) http和https就是在应用层上的协议,http为明文数据传输协议(不可靠),https为密文数据传输协议(可靠),端口号为80、443

在img中引入第三方图片地址出现防盗链 如图: 在这里插入图片描述 在请求标头中有一个字段 referer 它会告诉服务器是从哪个页面来链接过来的,以此给后端进行处理,防止第三方引用。毕竟这样引用是用的第三方服务器的流量。 所以有时会用来做防盗链,判断该访问来源是不是在后端记录的白名单内,若不在就不能下载或显示。