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

1、Proxy代理作用

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

2、常見情況

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

3、應(yīng)用方式

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

 注：

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

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

4、具體配置實例 

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

5、配置思路

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

具體配置如下：

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

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

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

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

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

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

代理原理：

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

則：

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

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

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

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

Vue.proxyTable是什么？

在vue項目中的config文件夾下的index文件中有一個proxyTable節(jié)點。

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

為什么會有proxyTable存在？

在我開發(fā)我的畢業(yè)設(shè)計：一個基于vue+springboot的手機交易網(wǎng)站的時。因為我采用前后端分離，前端用的是node服務(wù)器，后端用的是tomcat服務(wù)器。因此，因為端口不一樣所以涉及跨域。

正常情況下，無法通過ajax向后臺請求到數(shù)據(jù)。因為跨域，瀏覽器的同源策略，截獲了這次數(shù)據(jù)的返回。

解決方法：

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

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

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

配置proxyTable

proxyTable跨域的基本原理：

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

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

因為代理服務(wù)器不是瀏覽器，沒有同源策略限制。

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

總結(jié)。

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

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

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

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

最新評論