這里不具體講反向代理的原理和作用，就是記錄一下如何用反向代理獲取貓眼數(shù)據(jù)（因?yàn)樵陧?xiàng)目中，前端直接獲取貓眼api數(shù)據(jù)會(huì)被同源策略殺死）

分析貓眼的請(qǐng)求

比如這里，我想獲取貓眼在搜索一部電影時(shí)，自動(dòng)返回匹配搜索字段的數(shù)據(jù)，通過分析，右側(cè)藍(lán)色為請(qǐng)求的部分，其中 search?kw… 開頭的字段都是我在測(cè)試是否為實(shí)時(shí)請(qǐng)求數(shù)據(jù)的響應(yīng)，可以看到 kw= 為你的輸入值，cityId= 為你的城市值

雙擊這個(gè)請(qǐng)求可以打開具體的鏈接，這里我是用了 FE 這個(gè)插件來便于我們講 json 數(shù)據(jù)解析，可以看到搜索欄就是我們要的答案了

配置 vue.config.js 文件

在 vue 項(xiàng)目中要實(shí)現(xiàn)這個(gè)跨域，可以利用反向代理，這里要先配置 vue.config.js 文件

module.exports = {devServer: {proxy: {// /ajax 為你請(qǐng)求的方式，理論上是后端暴露給你的，這里貓眼使用 /ajax 的方式'/ajax': {// target 為 url 中 /ajax 前面的請(qǐng)求網(wǎng)址的部分target: 'https://m.maoyan.com/',// 實(shí)現(xiàn)反向代理changeOrigin: true},}} }

使用 axios 進(jìn)行請(qǐng)求

vue 中常使用 axios 進(jìn)行網(wǎng)絡(luò)請(qǐng)求，newVal 為我實(shí)時(shí)搜索的數(shù)據(jù)，每次在輸入框輸入不同的值時(shí)，newVal 獲取到這個(gè)值，傳到我的請(qǐng)求中，就可以發(fā)起網(wǎng)絡(luò)請(qǐng)求

this.axios.get(`/ajax/search?kw=${newVal}&cityId=1&stype=-1`).then((res)=>{console.log(res);})

總結(jié)

以上是生活随笔為你收集整理的vue-cli 实现反向代理获取猫眼数据的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。