前端
一点也不简单

前端如何突破refer验证

重要声明:referer是服务端的一个验证方式,所以要从服务端着手, referer属性是前台接口告诉服务器该接口的域名,而后台可以对应设置请求头referer从而对接口进行限制访问。 

那么,什么东西最合适呢?那就是代理服务器了!前端跨域请求利器之一的代理服务器。

我们用一个基础的vue案例,在做服务器代理,并突破referer限制,移动端的小米商城的接口是做了referer验证的,可以看下图:

接口

接口测试工具如下:

接口

可见是做了referer的,需要对请求header进行处理(参照官网的header设置)。

referer设置

那么,问题来了,这是在接口测试工具的方法,项目中我们怎么设置header呢?

步骤:

1.我们创建一个vue项目和创建vue.config.js,下载axios,启动

vue create refererdemo
cd refererdemo
yarn add axios
yarn serve

2.vue.config.js里写(配置完vue.config.js记得重启项目才能生效):

module.exports = {
    devServer : {
      proxy: {//代理跨域
        '/xiaomi' : {
          target : 'https://m.mi.com',// 需要代理的地址
          changeOrigin: true,//是否跨域
          secure: false, // 如果是https接口,需要配置这个参数
          pathRewrite: {//重写接口地址
              '^/xiaomi': ''
          },
          headers: {//header设置
            referer: 'https://m.mi.com/',//referer
            origin: 'https://m.mi.com/'
          }
        }
      }
    }
}

3.我们在vue.js里使用这个反向代理

<script>
import HelloWorld from './components/HelloWorld.vue'
import axios from 'axios'
export default {
  name: 'app',
  components: {
    HelloWorld
  },
  created() {
    this.getXiaoMi()
  },
  methods: {
    getXiaoMi(){
      axios({
        method:'post',//post提交
        url:'/xiaomi/v1/home/page',
        headers: {
         'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'//设置from表单提交
        },
        data: { //表单数据(一般post)
            'client_id': '180100031051',
            'channel_id': '0',
            'webp': '1',
            'page_type': 'home'  
        },
        params: { //路径拼写的数据(一般get)
            // 'client_id': '180100031051',
            // 'channel_id': '0',
            // 'webp': '1',
            // 'page_type': 'home' 
        }
      }).then(data => {
       console.log(data)
     })
    }
  },
}
</script>

4.请求数据的结果

状态码200,指向localhost的原因是啥?这就不用说了把,反向代理的思想大家应该明白,就是通过一个服务来请求数据,我们在这个服务里拿数据,不直接从接口拿,间接的

拿到数据

数据也确确实实拿到了!好了,本次分享就over了,已经很详细了,举一反三,大家会vue的应该也就会react的了。

赞(0) 打赏
未经允许不得转载:专注前端开发和vps技术交流的博客-纸飞机 » 前端如何突破refer验证

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

微信扫一扫打赏