1.Vue腳手架配置代理
2.vue-resource
一.Vue腳手架配置代理
1.1 使用Ajax庫 --? axios
① 安裝 :?npm i axios
② 引入:??import axios from 'axios'
③ 使用示例?
1.2 解決開發(fā)環(huán)境Ajax跨域問題
跨域：違背了同源策略，同源策略規(guī)定協(xié)議名，主機(jī)名，端口號必須一致
解決方法：配置代理服務(wù)器
兩種方式
方式① ：
（1) 在 Vue.config.js 中添加如下配置轉(zhuǎn)發(fā)的服務(wù)器
devServer: {
proxy: 'http://localhost:5000'
}(2) 重新啟動腳手架
(3) 請求的地方寫8080
?（4）說明：
- ?優(yōu)點(diǎn)：配置簡單，請求資源時直接發(fā)給前端8080即可
- ?缺點(diǎn)：不能配置多個代理，無法靈活控制請求是否走代理
- 工作方式：如果本地存在就會直接從本地拿，不會去請求代理服務(wù)器
方式 ②
（1）配置
- '/atguigu'：請求前綴，如果有請求前置，就走代理，如果沒有，就不走代理，做到了靈活控制
- 在請求的時候，前綴是放到端口號后面的
- pathRewrite:匹配路徑，把a(bǔ)tguigu的字符串變成空字符串，轉(zhuǎn)發(fā)到服務(wù)器那邊就是正確的路徑
-
changeOrigin為true時，服務(wù)器收到的host為 localhost:5000
-
changeOrigin 為false時， 服務(wù)器收到的host為?localhost:8080
-
changeOrigin 默認(rèn)值為true
devServer: {
proxy: {
'/atguigu': {
target: 'http://localhost:5000',
pathRewrite: { '^/atguigu': '' },
ws: true, // 用于支持webSocket
changeOrigin: true // 用于控制請求頭中的host值
},
'/demo': {
target: 'http://localhost:5001',
pathRewrite: { '^/demo': '' },
// ws: true, // 用于支持webSocket
// changeOrigin: true // 用于控制請求頭中的host值
}
}
}
(2) 說明
- 優(yōu)點(diǎn)：可以配置多個代理，且可以靈活的控制請求是否走代理
- 缺點(diǎn)：配置略微繁瑣，請求資源時必須加前綴
?二.?vue-resource（了解）
?vue插件庫，vue1.x使用廣泛，官方已不維護(hù)
① 安裝：npm i vue-resource
② 引入：import vueResource from 'vue-resource'
③ 使用：Vue.use(vueResource)
使用：this.$http.get
文章來源：http://www.zghlxwxcb.cn/news/detail-635281.html
?文章來源地址http://www.zghlxwxcb.cn/news/detail-635281.html
到了這里，關(guān)于Vue2 第十七節(jié) Vue中的Ajax的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
