反向代理

在前后端分離的開發(fā)中，存在一個問題，我的前端代碼是在我的電腦上。而后端java代碼是在另一位同事上。如果前端請求直接調(diào)用后端那位同事提供的接口（用的是他的IP加上他啟動服務(wù)器的端口），那么會存在跨域問題無法訪問。這時候就會想到用反向代理解決問題。

所謂的反向代理，就是在前端和后臺服務(wù)器的中間以一個代理服務(wù)器的形式接受前端傳來的請求，并將其請求發(fā)送到對應(yīng)的服務(wù)器上。解決跨域問題。

nginx這東西太大了，學(xué)習(xí)成本也比較大。我們弄個API的接口代理，用node的express就好了。

準(zhǔn)備工作

如果你是用vue-cli構(gòu)建的項目，這些準(zhǔn)備工作就不需要了。直接在dev-server.js進(jìn)行代理配置就好了。

下面的這些包都需要用npm進(jìn)行安裝，如果沒有安裝需要先安裝才可以使用它

a、引入express

  const express = require('express')
  const app = express()

b、引入反向代理插件 http-proxy-middlewar

  const proxyMiddlewar = require('http-proxy-middlewar')

代理配置

ok，這兩個就是進(jìn)行反向代理的準(zhǔn)備工作。下面開始進(jìn)行反向代理配置。

首先，需要知道的是后端服務(wù)器的ip和端口號，

  const proxyPath = 'http://168.96.0.1:8080'   // 注意，這里只需要IP和端口號就可以了。這個ip我瞎寫的

然后，將這個path配置到代理配置項中

  const proxyOption = {target: proxyPath,changeOrigin: true}

現(xiàn)在用express使用這個代理就好了

app.use('/api', proxyMiddlewar(proxyOption))  // 下面詳細(xì)說明這一段  
app.listen() //表示監(jiān)聽的端口號也就是本地的端口號。用vue-cli構(gòu)建的項目不需要寫這行代碼

這里注意這個'/api' ，這個是我們要進(jìn)行攔截的請求。什么意思呢？

我們前端用node啟動一個服務(wù)器，一般是localhost:8080。我們前端可能會有很多種類的請求，比如：
vue-router，就像假設(shè)我們有一個/blog的路由，那么 localhost:8080/blog 是跳入/blog這個路由，并顯示相應(yīng)的頁面。

像這一類的請求，我們當(dāng)然是不希望通過反向代理去后臺請求數(shù)據(jù)的。想要通過反向代理去請求后臺的一般都是后臺的接口。這時候，前后端需要有一個規(guī)范，比如前端請求的/api下的都是請求后臺的接口，這會很方便前后端聯(lián)調(diào)開發(fā)。

那么就像上面那段代碼，通過配置一個攔截請求的context（上面是/api）,只有為/api開頭的才會通過反向代理去后臺發(fā)起請求。

app.use('/api', proxyMiddlewar(proxyOption))

這段就相當(dāng)于

 http://localhost:3000/api/..... —>  http://168.90.0.1:8080/api/....

這就完成了向后臺發(fā)起請求的反向代理

后續(xù)還會有其他的請求方面的配置
參考鏈接： https://github.com/chimurai/http-proxy-middleware