這里不具體講反向代理的原理和作用，就是記錄一下如何用反向代理獲取貓眼數據（因為在項目中，前端直接獲取貓眼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 实现反向代理获取猫眼数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。