反向代理
在前后端分離的開(kāi)發(fā)中怠堪，存在一個(gè)問(wèn)題恳谎，我的前端代碼是在我的電腦上戒祠。而后端java代碼是在另一位同事上。如果前端請(qǐng)求直接調(diào)用后端那位同事提供的接口（用的是他的IP加上他啟動(dòng)服務(wù)器的端口）宴咧，那么會(huì)存在跨域問(wèn)題無(wú)法訪問(wèn)。這時(shí)候就會(huì)想到用反向代理解決問(wèn)題径缅。
所謂的反向代理掺栅，就是在前端和后臺(tái)服務(wù)器的中間以一個(gè)代理服務(wù)器的形式接受前端傳來(lái)的請(qǐng)求，并將其請(qǐng)求發(fā)送到對(duì)應(yīng)的服務(wù)器上纳猪。解決跨域問(wèn)題柿冲。
nginx這東西太大了，學(xué)習(xí)成本也比較大兆旬。我們弄個(gè)API的接口代理假抄，用node的express就好了。
準(zhǔn)備工作
如果你是用vue-cli構(gòu)建的項(xiàng)目丽猬，這些準(zhǔn)備工作就不需要了宿饱。直接在dev-server.js進(jìn)行代理配置就好了。
下面的這些包都需要用npm進(jìn)行安裝脚祟，如果沒(méi)有安裝需要先安裝才可以使用它
a谬以、引入express
const express = require('express')
const app = express()
b、引入反向代理插件 http-proxy-middlewar
const proxyMiddlewar = require('http-proxy-middlewar')
代理配置
ok由桌，這兩個(gè)就是進(jìn)行反向代理的準(zhǔn)備工作为黎。下面開(kāi)始進(jìn)行反向代理配置邮丰。
首先，需要知道的是后端服務(wù)器的ip和端口號(hào)铭乾，
const proxyPath = 'http://168.96.0.1:8080' // 注意剪廉，這里只需要IP和端口號(hào)就可以了。這個(gè)ip我瞎寫(xiě)的
然后炕檩，將這個(gè)path配置到代理配置項(xiàng)中
const proxyOption = {target: proxyPath,changeOrigin: true}
現(xiàn)在用express使用這個(gè)代理就好了
app.use('/api', proxyMiddlewar(proxyOption)) // 下面詳細(xì)說(shuō)明這一段
app.listen() //表示監(jiān)聽(tīng)的端口號(hào)也就是本地的端口號(hào)斗蒋。用vue-cli構(gòu)建的項(xiàng)目不需要寫(xiě)這行代碼
這里注意這個(gè)'/api' ，這個(gè)是我們要進(jìn)行攔截的請(qǐng)求笛质。什么意思呢泉沾？
我們前端用node啟動(dòng)一個(gè)服務(wù)器，一般是localhost:8080妇押。我們前端可能會(huì)有很多種類的請(qǐng)求跷究，比如：
vue-router，就像假設(shè)我們有一個(gè)/blog的路由敲霍，那么 localhost:8080/blog 是跳入/blog這個(gè)路由揭朝，并顯示相應(yīng)的頁(yè)面。
像這一類的請(qǐng)求色冀，我們當(dāng)然是不希望通過(guò)反向代理去后臺(tái)請(qǐng)求數(shù)據(jù)的潭袱。想要通過(guò)反向代理去請(qǐng)求后臺(tái)的一般都是后臺(tái)的接口。這時(shí)候锋恬，前后端需要有一個(gè)規(guī)范屯换，比如前端請(qǐng)求的/api下的都是請(qǐng)求后臺(tái)的接口，這會(huì)很方便前后端聯(lián)調(diào)開(kāi)發(fā)与学。
那么就像上面那段代碼彤悔，通過(guò)配置一個(gè)攔截請(qǐng)求的context（上面是/api）,只有為/api開(kāi)頭的才會(huì)通過(guò)反向代理去后臺(tái)發(fā)起請(qǐng)求。
app.use('/api', proxyMiddlewar(proxyOption))
這段就相當(dāng)于
http://localhost:3000/api/..... —> http://168.90.0.1:8080/api/....
這就完成了向后臺(tái)發(fā)起請(qǐng)求的反向代理
后續(xù)還會(huì)有其他的請(qǐng)求方面的配置
參考鏈接： https://github.com/chimurai/http-proxy-middleware
