目錄
前言
代理方式一
優(yōu)點
缺點
工作方式
代理方式二
優(yōu)點
缺點
前言
今天為什么要講這個vue腳手架的代理呢？
接下來我們先來聊一下cros，相信大家對于這個單詞都不會陌生吧！當我們前端請求發(fā)生了錯誤提示這個詞的時候，那么基本上就是跨域了。如何解決跨域其實有多種。
今天要講的主角，vue通過腳手架配置代理服務器，就能夠解決我們的這個跨域問題。
如果你的前端應用以及后端 API 服務器沒有運行在同一個主機上，你需要在開發(fā)環(huán)境下將 API 請求代理到 API 服務器。這個問題可以通過?vue.config.js?文件中的?devServer.proxy?選項來進行配置。
代理方式一
他是在vue.config.js里配置的，添加如下代碼即可完成
devServer：{
? ? ? ? proxy:'http://IP:端口號'
}
僅僅這一段代碼，就可輕松完成代理配置。
優(yōu)點
他的配置比較簡單，而且請求資源的時候我們直接發(fā)送請求到前端端口即可實現
缺點
他的缺點也是比較明顯的，他不能夠配置多個代理，也是不能夠靈活的實現控制請求是否走代理完成請求
工作方式
如果按照上面所屬的這種方式配置代理，當我們請求了一個前端不存在的資源的實時，那么這個請求立即轉發(fā)給服務器。
如果請求的資源前端存在的話，那么他是不會向服務器發(fā)送請求的。直接請求前端的資源。
這就是他的特點：優(yōu)先匹配前端的資源
代理方式二
這種方式他是在vue.config.js里配置的，添加如下代碼即可完成
具體編碼，我們從官網拿來，添加注釋，輔助我們更好理解
module.exports = {
? devServer: {
? ? proxy: {
? ? ? '/api': {? ? ? ? ? ? ? ? ? ? // 他是用來匹配所有以‘/api’開頭的請求路徑，這里開頭指的是端口號后面的
? ? ? ? target: '<url>',? ? ? ? // 代理目標的基礎路徑
? ? ? ? ws: true,
? ? ? ? changeOrigin: true
? ? ? },
? ? ? '/foo': {
? ? ? ? target: '<other_url>'
? ? ? }
? ? }
? }
}
這里要注意，changeOrigin的配置，當他為false的時候，服務器收到的請求投中的host端口是前端服務器的端口，當他為true的時候，服務器收到的請求頭中的host就是我們服務端接口地址和端口。
他的默認值就是true
優(yōu)點
他是可以配置多個代理的，并且還可以零活的來控制請求是否走我們的代理
缺點
他的配置是比較繁瑣的，而且請求資源的時候必須要加上前綴
好了，今天關于vue配置服務器代理的文章就分享到這里。文章來源：http://www.zghlxwxcb.cn/news/detail-432099.html
歡迎大家點擊下方卡片，關注《coder練習生》文章來源地址http://www.zghlxwxcb.cn/news/detail-432099.html
到了這里，關于【五一創(chuàng)作】VUE基礎知識——代理服務器的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
