1.1 使用代理服務(wù)器
1.1.1 方式一
在 vue.config.js 中添加如下配置：
devServer:{
proxy:"http://localhost:5000"
}
說(shuō)明：
- 優(yōu)點(diǎn)：配置簡(jiǎn)單，請(qǐng)求資源時(shí)直接發(fā)給前端（8080）即可。
- 缺點(diǎn)：不能配置多個(gè)代理鸭栖，不能靈活的控制請(qǐng)求是否走代理。
- 工作方式：若按照上述配置代理绪爸，當(dāng)請(qǐng)求了前端不存在的資源時(shí)蛉拙，那么該請(qǐng)求會(huì)轉(zhuǎn)發(fā)給服務(wù)器 （優(yōu)先匹配前端資源）
1.1.2 方式二
編寫(xiě) vue.config.js 配置具體代理規(guī)則：
module.exports = {
devServer: {
proxy: {
'/api1': {
// 匹配所有以 '/api1'開(kāi)頭的請(qǐng)求路徑
target: 'http://localhost:5000',// 代理目標(biāo)的基礎(chǔ)路徑
changeOrigin: true,
pathRewrite: {'^/api1': ''}
},
'/api2': {
// 匹配所有以 '/api2'開(kāi)頭的請(qǐng)求路徑
target: 'http://localhost:5001',// 代理目標(biāo)的基礎(chǔ)路徑
changeOrigin: true,
pathRewrite: {'^/api2': ''}
}
}
}
}
/*
changeOrigin設(shè)置為true時(shí)，服務(wù)器收到的請(qǐng)求頭中的host為：localhost:5000
changeOrigin設(shè)置為false時(shí)觉增，服務(wù)器收到的請(qǐng)求頭中的host為：localhost:8080
changeOrigin默認(rèn)值為true
*/
說(shuō)明：
- 優(yōu)點(diǎn)：可以配置多個(gè)代理兵拢，且可以靈活的控制請(qǐng)求是否走代理。
- 缺點(diǎn)：配置略微繁瑣逾礁，請(qǐng)求資源時(shí)必須加前綴说铃。
1.2 Vue 項(xiàng)目中常用的 2 個(gè) Ajax 庫(kù)
1.2.1 Axios
說(shuō)明：通用的
Ajax請(qǐng)求庫(kù)，官方推薦，使用廣泛安裝：
npm install axios-
使用步驟：
-
引入
import axios from "axios"; -
使用
axios.get("http://localhost:8080/api/students").then( (response) => { console.log("請(qǐng)求成功了", response.data); }, (error) => { console.log("請(qǐng)求失敗了", error.message); } );
-
1.2.2 vue-resource
Vue 插件庫(kù)腻扇，Vue 1.x 使用廣泛债热，官方已不維護(hù)
