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

1、Proxy代理作用

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

2、常見情況

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

3、應(yīng)用方式

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

 注：

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

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

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

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

5、配置思路

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

具體配置如下：

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

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

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

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

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

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

代理原理：

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

則：

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

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

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

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

Vue.proxyTable是什么？

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

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

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

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

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

解決方法：

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

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

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

配置proxyTable

proxyTable跨域的基本原理：

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

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

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

proxyTable: {
      // 這里配置 '/api' 就等價(jià)于 target , 你在鏈接里訪問 /api === http://localhost:54321
      '/api': {
        target: 'http://localhost:54321/', // 真是服務(wù)器的接口地址 // http://localhost:54321/json.data.json,
        secure: true, // 如果是 https ,需要開啟這個(gè)選項(xiàng)
        changeOrigin: true, // 是否是跨域請求?肯定是啊,不跨域就沒有必要配置這個(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在開發(fā)環(huán)境中給我們提供的的一個(gè)代理服務(wù)器。

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

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

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

最新評論