这里不具体讲反向代理的原理和作用,就是记录一下如何用反向代理获取猫眼数据(因为在项目中,前端直接获取猫眼api数据会被同源策略杀死)
分析猫眼的请求
比如这里,我想获取猫眼在搜索一部电影时,自动返回匹配搜索字段的数据,通过分析,右侧蓝色为请求的部分,其中 search?kw… 开头的字段都是我在测试是否为实时请求数据的响应,可以看到 kw= 为你的输入值,cityId= 为你的城市值
双击这个请求可以打开具体的链接,这里我是用了 FE 这个插件来便于我们讲 json 数据解析,可以看到搜索栏就是我们要的答案了
配置 vue.config.js 文件
在 vue 项目中要实现这个跨域,可以利用反向代理,这里要先配置 vue.config.js 文件
module.exports = {
devServer: {
proxy: {
// /ajax 为你请求的方式,理论上是后端暴露给你的,这里猫眼使用 /ajax 的方式
'/ajax': {
// target 为 url 中 /ajax 前面的请求网址的部分
target: 'https://m.maoyan.com/',
// 实现反向代理
changeOrigin: true
},
}
}
}
使用 axios 进行请求
vue 中常使用 axios 进行网络请求,newVal 为我实时搜索的数据,每次在输入框输入不同的值时,newVal 获取到这个值,传到我的请求中,就可以发起网络请求
this.axios.get(`/ajax/search?kw=${newVal}&cityId=1&stype=-1`).then((res)=>{
console.log(res);
})