前端如何突破refer验证

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

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

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

接口测试工具如下：

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

那么，问题来了，这是在接口测试工具的方法，项目中我们怎么设置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的了。