重要声明：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的了。
