最近項(xiàng)目中需要使用vue框架。雖然vue在前端開發(fā)人員里也不算是什么新鮮的事兒了。只要是搞前端的都會(huì)一些vue的操作。我也不多說，直接進(jìn)入正題。（這兒我以vue2.x為例）
安裝什么的，我就不在這兒說了。你能找到小冰的博客，說明你對(duì)前端也有一些了解了。當(dāng)然，我安裝是在“菜鳥教程”里的叔進(jìn)行安裝的。

vue跨域的配置

安裝好的vue目錄結(jié)構(gòu)大概是長(zhǎng)這樣子的。如下圖所示：

關(guān)于跨域的配置，我把代碼貼上

//這串代碼是在根目錄下的 config/index.js 文件中寫的//當(dāng)然，有些成品框架是直接是根目錄下的 vue.config.js 文件，其實(shí)都是一樣的意思proxyTable: {'/api':{target:`192.168.XX.XX`, //請(qǐng)求后臺(tái)接口，如果有端口號(hào)，也需要帶上端口號(hào)changeOrigin:true, // 允許跨域pathRewrite:{'^/api' : '' // 重寫請(qǐng)求}},},

同時(shí)，在還需要修改根目錄下的 .env.development （開發(fā)環(huán)境） 和 .env.staging （默認(rèn)測(cè)試環(huán)竟）以及 .env.production （線上環(huán)竟 這三個(gè)文件，線上環(huán)境在開發(fā)的時(shí)候可以先不考濾，等項(xiàng)目完成后再來配也是可以的。

# 開發(fā)環(huán)境 .env.development ENV = 'development' VUE_APP_BASE_API = '/api' #api是你的接口，對(duì)應(yīng)上面config/index.js 里面的那個(gè)api （下同，不再做講述） # 默認(rèn)測(cè)試環(huán)境 .env.staging ENV = 'staging' VUE_APP_BASE_API = '/api' # 生產(chǎn)默認(rèn)配置（或者叫線上環(huán)竟） .env.production ENV = 'production' #VUE_APP_BASE_API = '/api'

在這配置好后，是需要重啟服務(wù)的。（注意，任何修改這個(gè)文件，都需要重啟服務(wù)才會(huì)生效）。其實(shí)，到這兒，跨域的問題已基本上解決了。但為了提交開發(fā)效率，我們一般還需要在配一個(gè)叫做“攔截器”的東西。

攔截器的配置

所謂攔截器，其實(shí)就是對(duì)于前端發(fā)起的請(qǐng)求，都會(huì)先經(jīng)過攔截器，在攔截器里面，我們可以自由的添加諸如Token的東西。而對(duì)于后端返回的數(shù)據(jù)，我們也可以攔截器里面加于過濾。

//在src目錄下，新建一個(gè)utils的目錄，在該目錄下，新建一個(gè)http.js的文件 //src/utils/http.js import axios from 'axios' const request = axios.create({timeout: 5000 })// request 攔截器 // 可以自請(qǐng)求發(fā)送前對(duì)請(qǐng)求做一些處理 // 比如統(tǒng)一加token，對(duì)請(qǐng)求參數(shù)統(tǒng)一加密 request.interceptors.request.use(config => {//console.log(config);config.headers['Content-Type'] = 'application/json;charset=utf-8';// config.headers['token'] = user.token; // 設(shè)置請(qǐng)求頭return config }, error => {return Promise.reject(error) }); // response 攔截器 // 可以在接口響應(yīng)后統(tǒng)一處理結(jié)果 request.interceptors.response.use(response => {//其實(shí)，在這兒，我們可以對(duì)后端返回的數(shù)據(jù)做處理//比如說返回的狀態(tài)碼加于過濾什么的，都可以在這兒做處理。//說白了 response 就是響應(yīng)的意思let res = response.data;// 如果是返回的文件if (response.config.responseType === 'blob') {return res}// 兼容服務(wù)端返回的字符串?dāng)?shù)據(jù)if (typeof res === 'string') {res = res ? JSON.parse(res) : res}return res;},error => {console.log('err' + error) // for debugreturn Promise.reject(error)} ) export default request

到這兒，攔截器就配置完成了。接下為，我們就要為我們的項(xiàng)目對(duì)接后端的接口了。一般是這樣弄的。（當(dāng)然，這也一個(gè)不約定的約定，大家都怎么來，所以我也就這樣來）

//在src目錄下，新建一個(gè) api的文件夾,用于存放后端給的接口地址 //在該api文件夾下，我們針對(duì)所實(shí)現(xiàn)功能的不同而給不用的文件名字 //比如說，goods.js 是用于管理商品的 //那么，我們就新建一個(gè)goods.js的文件 import request from '@/utils/http'; import qs from 'qs'export function getGoods(data){return request({//這兒注意一下，我這兒前有一個(gè)api，其實(shí)我這個(gè)api是剛才前面在配置跨域時(shí)所寫的api的名字//可能有些后端開發(fā)人員會(huì)這樣子寫接品地址： 192.168.236.123/api/goods/getGoods//那么，我在這兒，url也必須這樣子寫上 /api/api/goods/getGoods//前面的域名在這兒就不需要寫了，已經(jīng)在剛配置跨域的時(shí)候已經(jīng)寫上了//所以這兒需要注意一下url:'/api/goods/getGoods', //這個(gè)是后端的接口地址method:'get',params:data}) }

之后，在頁(yè)面中，就能直接引用了

<!--goods.vue--> <script> import { getGoods } from '@/api/goods' method:{getGoodsFun(){getGoods({id:5}).then(res=>{console.log(res)}).catch(err=>{console.error(err)})} } </script>

關(guān)于跨域和攔截器的介紹，大概就是么些，詳細(xì)的，我晚上再做補(bǔ)充。

總結(jié)

以上是生活随笔為你收集整理的vue跨域和拦截器的配置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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