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