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

vue跨域的配置

安裝好的vue目錄結構大概是長這樣子的。如下圖所示：

關于跨域的配置，我把代碼貼上

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

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

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

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

攔截器的配置

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

//在src目錄下，新建一個utils的目錄，在該目錄下，新建一個http.js的文件 //src/utils/http.js import axios from 'axios' const request = axios.create({timeout: 5000 })// request 攔截器 // 可以自請求發(fā)送前對請求做一些處理 // 比如統(tǒng)一加token，對請求參數(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; // 設置請求頭return config }, error => {return Promise.reject(error) }); // response 攔截器 // 可以在接口響應后統(tǒng)一處理結果 request.interceptors.response.use(response => {//其實，在這兒，我們可以對后端返回的數(shù)據(jù)做處理//比如說返回的狀態(tài)碼加于過濾什么的，都可以在這兒做處理。//說白了 response 就是響應的意思let res = response.data;// 如果是返回的文件if (response.config.responseType === 'blob') {return res}// 兼容服務端返回的字符串數(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

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

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

之后，在頁面中，就能直接引用了

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

關于跨域和攔截器的介紹，大概就是么些，詳細的，我晚上再做補充。

總結

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

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