欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue腳手架配置代理服務(wù)器的兩種方式(小結(jié))

 更新時(shí)間:2023年01月08日 15:10:03   作者:小花皮豬  
本文主要介紹了Vue腳手架配置代理服務(wù)器的兩種方式(小結(jié)),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1 前言

本文主要介紹使用Vue腳手架配置代理服務(wù)器的兩種方式

注意:Vue腳手架給我們提供了兩種配置代理服務(wù)器的方式,各有千秋,使用的時(shí)候只能二選一,不能同時(shí)使用

2 代理

除了cros和jsonp,還有一種代理方式,這種用的相對(duì)來(lái)說(shuō)也很多, 一般代理服務(wù)器

這個(gè)概念很好理解,相當(dāng)于生活中的中介

在前后端直接配置一個(gè)代理服務(wù)器,這個(gè)代理服務(wù)器和前端處于一個(gè)位置,當(dāng)前端向后端請(qǐng)求數(shù)據(jù)的時(shí)候,不會(huì)直接訪問(wèn)后端,而是找這臺(tái)代理,代理收到前端的請(qǐng)求,轉(zhuǎn)發(fā)給后端,如果收到后端的響應(yīng)數(shù)據(jù),就把這些數(shù)據(jù)返回給前端

代理服務(wù)器的方式有一個(gè)東西大家應(yīng)該都聽(tīng)說(shuō)過(guò):nginx,但是nginx一般屬于后端人員掌握的,這里使用一種對(duì)前端人員更加友好的技術(shù):cli,沒(méi)錯(cuò),就是vue的腳手架,它就可以幫助我們代理服務(wù)器,相比nginx它簡(jiǎn)單的不能再簡(jiǎn)單了,只需要短短幾行代碼就可以搞定

vue腳手架配置方式1

既然想對(duì)腳手架進(jìn)行配置,肯定要改一個(gè)文件,就是vue的配置文件:vue.config.js,肯定要在這里面寫(xiě)代碼,然后代理服務(wù)器就開(kāi)起來(lái)了,到底怎么寫(xiě),可以參考官方文檔:Vue腳手架代理

復(fù)制配置代碼進(jìn)行修改配置文件

注意:這里的端口是要請(qǐng)求后端的端口,并且只需要寫(xiě)到端口即可,我的后端端口是9090

// 開(kāi)啟代理服務(wù)器
devServer: {
  // 代理的端口是要請(qǐng)求后端的端口  寫(xiě)到具體的端口即可 不需要寫(xiě)具體的路徑
  proxy: 'http://localhost:9090'
}

注意:這種代理簡(jiǎn)單,但是不完美,原因在下面

這樣就配置了一個(gè)代理服務(wù)器,一定要重啟腳手架

重啟完成后再次訪問(wèn),還是報(bào)錯(cuò)跨域問(wèn)題!

注意:雖然已經(jīng)配置了代理服務(wù)器,但是還沒(méi)用到這個(gè)代理,所以請(qǐng)求的時(shí)候不應(yīng)該是后端的端口9090,而是代理的端口8080,這里就要寫(xiě)全路徑了,不能和配置代理服務(wù)器的時(shí)候一樣只寫(xiě)端口了

再次訪問(wèn),發(fā)現(xiàn)正常了,說(shuō)明代理有效

這種代理有兩個(gè)誤區(qū)(坑),下面一一說(shuō)明

兩個(gè)誤區(qū)(坑)

誤區(qū)1

不能靈活的控制到底走不走代理

首先,這種代理不是什么都會(huì)代理給后端的,如果代理的東西前端有,就會(huì)直接返回,就不去找后端,比如下面這個(gè)例子

我在public目錄寫(xiě)一個(gè)叫queryUserInfo的文件,沒(méi)錯(cuò),和后端的接口名稱一樣

這時(shí)候請(qǐng)求就會(huì)發(fā)現(xiàn),找到前端的內(nèi)容就不會(huì)訪問(wèn)后端了

誤區(qū)2

這種代理只能代理一個(gè)服務(wù)器不能代理多個(gè)服務(wù)器,也就是說(shuō)目前代理的8080只能把請(qǐng)求交給9090,不能轉(zhuǎn)發(fā)給別人了

vue腳手架配置方式2

上面的代理方式,雖然簡(jiǎn)單,但是也有兩個(gè)坑,不夠完美,想要追求完美,還得是這種方式

那么這種方式怎么寫(xiě)呢?還是繼續(xù)看官方文檔:Vue腳手架代理

注意:這種配置代理和上面的配置代理只能二選一,不能同時(shí)使用!

把代碼復(fù)制到配置文件,進(jìn)行修改

devServer: {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->proxy: {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->'/api': {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->target: '<url>',ws: true,changeOrigin: true},'/foo': {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->target: '<other_url>'}}}

這里面有一些屬性,有的屬性可以配置使用,我們一一說(shuō)明

注意:不管修改哪個(gè)屬性,都要重啟vue!

/api和target

/api指的是請(qǐng)求前綴 這里的api可以更改 不一定非要叫api

target指的是如果請(qǐng)求前綴匹配上了,那么就找代理服務(wù)器請(qǐng)求

比如現(xiàn)在我請(qǐng)求的路徑不變還是上面的路徑

那么還是一樣的效果

這時(shí)候我把a(bǔ)pi前綴加上,理論來(lái)說(shuō)可以了,但是還是不行

不過(guò)這次不是跨域的問(wèn)題了,只是找不到請(qǐng)求

找不到請(qǐng)求是對(duì)的,因?yàn)榈暮蠖苏?qǐng)求沒(méi)有/api的前綴,那么如果忽略這個(gè)前綴呢?

pathRewrite

有這么一個(gè)屬性,官方?jīng)]有說(shuō):pathRewrite

         // 忽略前綴路徑 它是一個(gè)對(duì)象 里面是key value
        // 這個(gè)正則意思是 如果前綴是/api,那么會(huì)替換成空字符
      pathRewrite:{'^/api':''}

這個(gè)時(shí)候再測(cè)試,發(fā)現(xiàn)正常

ws

ws是websocket的縮寫(xiě),用于支持websocket,默認(rèn)為true,本人對(duì)websocket不是很了解,所以不多敘述!

changeOrigin

用于控制請(qǐng)求頭中的host值

或者說(shuō)是否真實(shí)匯報(bào)自身情況 true不真實(shí) false真實(shí) 一般為true,默認(rèn)也是true

為什么這么說(shuō)呢?我們通過(guò)下面案例查看,這時(shí)候我后端獲取請(qǐng)求的主機(jī)信息,大家注意觀察

改為false,好家伙,你小子反水是吧

配置多個(gè)代理

如果想要配置多個(gè)代理,直接復(fù)制一個(gè)即可,注意加上逗號(hào),修改端口和前綴

3 vue腳手架配置代理總結(jié)

vue腳手架配置代理
方法一
在vue.config.js中添加如下配置:
devServer:{
  proxy:"http://localhost:5000"
}
說(shuō)明:
1. 優(yōu)點(diǎn):配置簡(jiǎn)單,請(qǐng)求資源時(shí)直接發(fā)給前端(8080)即可。
2. 缺點(diǎn):不能配置多個(gè)代理,不能靈活的控制請(qǐng)求是否走代理。
3. 工作方式:若按照上述配置代理,當(dāng)請(qǐng)求了前端不存在的資源時(shí),那么該請(qǐng)求會(huì)轉(zhuǎn)發(fā)給服務(wù)器 (優(yōu)先匹配前端資源)
方法二
編寫(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ō)明:
1. 優(yōu)點(diǎn):可以配置多個(gè)代理,且可以靈活的控制請(qǐng)求是否走代理。
2. 缺點(diǎn):配置略微繁瑣,請(qǐng)求資源時(shí)必須加前綴。

到此這篇關(guān)于Vue腳手架配置代理服務(wù)器的兩種方式(小結(jié))的文章就介紹到這了,更多相關(guān)Vue腳手架配置代理服務(wù)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue3中的透?jìng)鱝ttributes教程示例詳解

    vue3中的透?jìng)鱝ttributes教程示例詳解

    這篇文章主要為大家介紹了vue3中的透?jìng)鱝ttributes教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • Vue組件選項(xiàng)props實(shí)例詳解

    Vue組件選項(xiàng)props實(shí)例詳解

    父組件通過(guò) props 向下傳遞數(shù)據(jù)給子組件,子組件通過(guò) events 給父組件發(fā)送消息。本文將詳細(xì)介紹Vue組件選項(xiàng)props,需要的朋友可以參考下
    2017-08-08
  • 淺談Vue組件及組件的注冊(cè)方法

    淺談Vue組件及組件的注冊(cè)方法

    本文主要介紹了淺談Vue組件及組件的注冊(cè)方法,詳細(xì)的介紹了什么是組件,及其組件注冊(cè)的兩種方式(全局和局部),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-08-08
  • Vue+Element實(shí)現(xiàn)封裝抽屜彈框

    Vue+Element實(shí)現(xiàn)封裝抽屜彈框

    這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Element實(shí)現(xiàn)簡(jiǎn)單的抽屜彈框效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2023-06-06
  • 淺談vue中數(shù)據(jù)雙向綁定的實(shí)現(xiàn)原理

    淺談vue中數(shù)據(jù)雙向綁定的實(shí)現(xiàn)原理

    本篇文章主要介紹了淺談vue中數(shù)據(jù)雙向綁定的實(shí)現(xiàn)原理 ,主要使用v-model這個(gè)數(shù)據(jù)雙向綁定,有興趣的可以了解一下
    2017-09-09
  • vue動(dòng)態(tài)生成新表單并且添加驗(yàn)證校驗(yàn)規(guī)則方式

    vue動(dòng)態(tài)生成新表單并且添加驗(yàn)證校驗(yàn)規(guī)則方式

    這篇文章主要介紹了vue動(dòng)態(tài)生成新表單并且添加驗(yàn)證校驗(yàn)規(guī)則方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • Vue項(xiàng)目接入Paypal實(shí)現(xiàn)示例詳解

    Vue項(xiàng)目接入Paypal實(shí)現(xiàn)示例詳解

    這篇文章主要介紹了Vue項(xiàng)目接入Paypal實(shí)現(xiàn)示例詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-06-06
  • ElementUI時(shí)間選擇器限制選擇范圍disabledData的使用

    ElementUI時(shí)間選擇器限制選擇范圍disabledData的使用

    本文主要介紹了ElementUI時(shí)間選擇器限制選擇范圍disabledData的使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-06-06
  • Vuex的基本概念、項(xiàng)目搭建以及入坑點(diǎn)

    Vuex的基本概念、項(xiàng)目搭建以及入坑點(diǎn)

    Vuex是一個(gè)專門為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式,這篇文章主要介紹了Vuex的基本概念、項(xiàng)目搭建以及入坑點(diǎn),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-11-11
  • axios中如何進(jìn)行同步請(qǐng)求(async+await)

    axios中如何進(jìn)行同步請(qǐng)求(async+await)

    這篇文章主要介紹了axios中如何進(jìn)行同步請(qǐng)求(async+await),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09

最新評(píng)論