详解前端如何突破refer验证

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

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

我们用一个基础的vue案例，在做服务器代理，并突破referer限制，移动端的小米商城的接口是做了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>