服務(wù)器代理proxyTable配置解決跨域

1、Proxy代理作用

proxy代理作用：前端服務(wù)器代理的作用是，告訴服務(wù)器任何未知請(qǐng)求（沒(méi)有匹配到靜態(tài)文件的請(qǐng)求），代理到一個(gè)另一個(gè)地址，從而解決跨域的問(wèn)題。

2、常見(jiàn)情況

前端在向后端進(jìn)行資源請(qǐng)求的時(shí)候，后端若沒(méi)有使用Cros中間件，則會(huì)出現(xiàn)跨域問(wèn)題，解決問(wèn)題的辦法之一就是前端使用Proxy進(jìn)行服務(wù)器代理。

3、應(yīng)用方式

在使用vue-cli2創(chuàng)建的vue項(xiàng)目時(shí)，在config文件夾下的index.js文件中，可以在dev相關(guān)配置信息中的proxyTable里對(duì)一個(gè)或者多個(gè)服務(wù)器進(jìn)行代理。

 注：

proxyTable是vue-cli提供解決vue開(kāi)發(fā)環(huán)境下跨域的方法，proxyTable的底層使用了http-proxy-middleware，他是http代理中間件，他依賴node.js，基本原理是用服務(wù)器代理解決跨域?yàn)g覽器跨域。

有時(shí)候在開(kāi)發(fā)的時(shí)候，我們請(qǐng)求的后代接口和vue不在同一個(gè)域名產(chǎn)生了跨域，而后臺(tái)服務(wù)器并未開(kāi)啟cors，這個(gè)時(shí)候需要配置proxyTable解決跨域問(wèn)題。

4、具體配置實(shí)例 

proxyTable:{
  //'api'就等于target，在鏈接里訪問(wèn)/api等同于http:/182.xx.xx.xx:8888/
'/api':{
target:'http://182.xx.xx.xxx:8888/',     //服務(wù)器的接口地址
secure:ture,                           //如果是https，需要開(kāi)啟這個(gè)選項(xiàng)
changeOrigin:ture,                    //是否跨域請(qǐng)求？ture
pathRewrite:{
  '/^api':'api/' 
                    //如果真實(shí)接口里包含了/api，就需要這樣配置
                    //等價(jià)于/^api=/api+api==http://182.xx.xx.xxx:8888/api
}
}
}

5、配置思路

在某次網(wǎng)絡(luò)請(qǐng)求完整路徑為  '/api/ynai/static/ai/'的時(shí)候，出現(xiàn)了跨域的問(wèn)題，之后需要再前端對(duì)該網(wǎng)絡(luò)請(qǐng)求進(jìn)行一次服務(wù)器代理

具體配置如下：

①首先代理標(biāo)志名，必須與請(qǐng)求路徑中頭部一致，示例代碼如下：proxyTable：{ '/api' : { } }

②配置target參數(shù)，確定請(qǐng)求代理的服務(wù)器根路徑，代碼示例如下：

 ③根據(jù)需要確定ws（websocket代理）的布爾值

 ④配置changeOrigin，賦值為ture，允許跨域

 ⑤根據(jù)需要配置pathRewrite參數(shù)

若最終代理后的路徑中不需要/api，那么需要配置pathRewrite的參數(shù)對(duì)路徑進(jìn)行重寫(xiě)為 ' '

代理原理：

假設(shè)有如下代理配置：

則：

1、發(fā)生網(wǎng)絡(luò)請(qǐng)求時(shí)，代理配置文件會(huì)去正則匹配網(wǎng)絡(luò)請(qǐng)求路徑，是否與代理匹配（比如發(fā)生的請(qǐng)求為/aaa/static/ai/，代理配置了 '/aaa ',則匹配成功）

2、匹配成功后，代理配置生效，他將會(huì)請(qǐng)求/aaa/static/ai/,經(jīng)過(guò)代理配置指定的方式處理，最后拼接到target指向的服務(wù)器根路徑（http：//www.baidu.com/）后面

3、最終形成完整的請(qǐng)求路徑（http：//www.baidu.com/static/ai），跨域問(wèn)題也得以解決

小結(jié)： 前端進(jìn)行服務(wù)器代理配置的視乎，必須保證代理配置文件能夠匹配到axious請(qǐng)求的url，才能正確的將target指向的服務(wù)器地址與url拼接得到完整的跨域請(qǐng)求路徑，進(jìn)而才能夠請(qǐng)求到遠(yuǎn)端的資源。

Vue.proxyTable是什么？

在vue項(xiàng)目中的config文件夾下的index文件中有一個(gè)proxyTable節(jié)點(diǎn)。

proxyTable是vue-cli腳手架在開(kāi)發(fā)模式下，為我們提供的一個(gè)跨域的代理中轉(zhuǎn)服務(wù)器服務(wù)。它是基于http-proxy-middleware插件的。

為什么會(huì)有proxyTable存在？

在我開(kāi)發(fā)我的畢業(yè)設(shè)計(jì)：一個(gè)基于vue+springboot的手機(jī)交易網(wǎng)站的時(shí)。因?yàn)槲也捎们昂蠖朔蛛x，前端用的是node服務(wù)器，后端用的是tomcat服務(wù)器。因此，因?yàn)槎丝诓灰粯铀陨婕翱缬颉?/p>

正常情況下，無(wú)法通過(guò)ajax向后臺(tái)請(qǐng)求到數(shù)據(jù)。因?yàn)榭缬?，瀏覽器的同源策略，截獲了這次數(shù)據(jù)的返回。

解決方法：

1、服務(wù)器開(kāi)啟cors。

2、用代理服務(wù)器中轉(zhuǎn)一下（vue請(qǐng)求的還是自己的后臺(tái)，讓后臺(tái)去請(qǐng)求需要數(shù)據(jù)的后臺(tái)，然后再將數(shù)據(jù)返回給vue。

倘若我們無(wú)法從后臺(tái)設(shè)置cors來(lái)進(jìn)行跨域支持。那我們就只能通過(guò)配置proxyTable來(lái)進(jìn)行跨域了。

配置proxyTable

proxyTable跨域的基本原理：

在開(kāi)發(fā)模式下，webpack會(huì)為我們提供一個(gè)http代理服務(wù)器。我們請(qǐng)求接口的時(shí)候，實(shí)際上是請(qǐng)求的webpack提供的這個(gè)http代理服務(wù)器。在由這個(gè)代理服務(wù)器請(qǐng)求真實(shí)的數(shù)據(jù)服務(wù)器。最后數(shù)據(jù)經(jīng)由webpack代理服務(wù)器。最后轉(zhuǎn)交給vue程序。

為什么加個(gè)代理服務(wù)器就可以了？

因?yàn)榇矸?wù)器不是瀏覽器，沒(méi)有同源策略限制。

proxyTable: {
      // 這里配置 '/api' 就等價(jià)于 target , 你在鏈接里訪問(wèn) /api === http://localhost:54321
      '/api': {
        target: 'http://localhost:54321/', // 真是服務(wù)器的接口地址 // http://localhost:54321/json.data.json,
        secure: true, // 如果是 https ,需要開(kāi)啟這個(gè)選項(xiàng)
        changeOrigin: true, // 是否是跨域請(qǐng)求?肯定是啊,不跨域就沒(méi)有必要配置這個(gè)proxyTable了.
        pathRewirte: {
          // 這里是追加鏈接,比如真是接口里包含了 /api,就需要這樣配置.
 
          '/^api': 'api/', 
          // 等價(jià)于 
          // step 1  /api = http://localhost:54321/
          // step 2 /^api = /api + api == http://localhost:54321/api
        }
      }
     },

總結(jié)。

1、proxyTable就是webpack在開(kāi)發(fā)環(huán)境中給我們提供的的一個(gè)代理服務(wù)器。

2、目的是為了在服務(wù)器不方便開(kāi)啟跨域功能的時(shí)候，我們也能方便的在開(kāi)發(fā)階段發(fā)送ajax跨域請(qǐng)求。

3、真實(shí)發(fā)布環(huán)境中讓后臺(tái)開(kāi)啟cors就好。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

最新評(píng)論