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

vue-cli 实现反向代理获取猫眼数据相关推荐

nginx反向代理获取用户真实ip
nginx做反向代理时,默认的配置后端获取到的ip都是来自于nginx,如何转发用户的真实ip到后端程序呢?如是是java后端,用request.getRemoteAddr();获取到的是nginx的 ...
vue如何设置反向代理
vue中设置反向代理: 在vue.config中:
vue项目nginx反向代理配置
1.nginx配置文件设置 #开始配置我们的反向代理 location /prod-api{ rewrite ^/prod-api/(.*)$ /$1 break; include uwsgi_par ...
nginx多层反向代理获取客户端真实ip
访问路径: 用户 --> www.chinasoft.cn(nginx反向代理) --> www.chinasoft.com(nginx反向代理) --> python服务端程序经过 ...
vue 跨域反向代理
Nginx proxy_pass 本地调试跨域接口前言 Nginx ("engine x") 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMT ...
若依框架vue 打包 nginx反向代理一个域名配置多个location项目
1.打包配置在多个项目一个域名的情况下需要改成hash模式不然部署之后刷新会404 全局搜索项目中location.href 设置成打包名字 (之前是/index,现在改为了/dist/i ...
JAVA中经过nginx反向代理获取客户端ip并获取相关坐标等信息
关于搜狐新浪ip库查询接口的使用直接输出访客ip及所在城市: <script src="http://pv.sohu.com/cityjson?ie=utf-8" > ...
2021-11-03 vue笔记:反向代理介绍和使用场景,基于 vue-cli 的反向代理设置及 axios 获取 json 数据
文章目录 0.反向代理是什么? 1.正向代理(forward proxy) 2.反向代理(Reverse proxy) 1.为什么要配置反向代理? 2.如何实现vue中配置反向代理? 2.1.安装和引 ...
使用nginx反向代理发起跨域请求
任务5:http://www.jnshu.com/task/2/45/detail//#1 页面文件放在github:https://github.com/Resalee/css_task/tree/ ...

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

分析猫眼的请求

配置 vue.config.js 文件

使用 axios 进行请求

vue-cli 实现反向代理获取猫眼数据相关推荐

最新文章

热门文章