vue-cli 实现反向代理获取猫眼数据

这里不具体讲反向代理的原理和作用，就是记录一下如何用反向代理获取猫眼数据（因为在项目中，前端直接获取猫眼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);
			})