nodejs中怎么搭建一個(gè)代理服務(wù)器

今天就跟大家聊聊有關(guān)nodejs中怎么搭建一個(gè)代理服務(wù)器，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

前端開發(fā)者在工作中常常遇到跨域的問題，一般我們遇到跨域問題主要使用以下辦法來解決:

1、jsonp

2、cors

3、配置代理服務(wù)器。

jsonp不是很靈活，只能發(fā)送get請(qǐng)求，不能發(fā)送psot請(qǐng)求，而cors雖然可以支持多種請(qǐng)求格式，但是如果請(qǐng)求攜帶cookie的話，還需要服務(wù)端和客戶端分別配置一下，個(gè)人感覺也很麻煩。

相對(duì)于前兩種，使用代理服務(wù)器解決跨域問題就簡(jiǎn)單了好多。

瀏覽器由于同源策略的原因，不同域名之間發(fā)送ajax請(qǐng)求，響應(yīng)的數(shù)據(jù)不會(huì)被瀏覽器加載。而服務(wù)器向服務(wù)器發(fā)送請(qǐng)求則沒有同源策略的限制。

下圖便是代理服務(wù)器的原理了：

代理服務(wù)器只是起一個(gè)中轉(zhuǎn)作用，配置代理服務(wù)器的方法有很多種，比如利用apache、nginx、tomcat等等，今天給大家介紹的是用nodejs配置代理服務(wù)器，用nodejs配置代理服務(wù)器，我們需要借助兩個(gè)npm包，一個(gè)是web開發(fā)框架express，一個(gè)是express中間件http-proxy-middleware 。

首先第一步我們先用express搭建兩個(gè)服務(wù)器，一個(gè)靜態(tài)資源服務(wù)器端口號(hào)為3000，一個(gè)接口服務(wù)器端口號(hào)為5000，靜態(tài)資源服務(wù)器代碼如下：

var express = require('express');
var app = express();
app.use(express.static('./public'));
app.listen(3000);

并且在public文件夾下新建a.html，并且在頁面中使用jquery，使用jquery發(fā)送ajax向接口服務(wù)器發(fā)送測(cè)試請(qǐng)求。

a.html代碼如下：

接著搭建接口服務(wù)器，接口服務(wù)器端口號(hào)為5000，代碼如下：

觀察代碼，我們?cè)O(shè)計(jì)了三個(gè)接口，都是get請(qǐng)求，只是url不同。

此時(shí)啟動(dòng)靜態(tài)資源服務(wù)器和接口服務(wù)器，然后訪問靜態(tài)資源服務(wù)器下面的a.html，結(jié)果如圖：

如圖所示，發(fā)生跨域了，此時(shí)在靜態(tài)資源服務(wù)器中安裝http-proxy-middleware 中間件，并將其集成到靜態(tài)資源服務(wù)器中。

代碼如下：

此時(shí)重啟靜態(tài)資源服務(wù)器，并將啊，a.html頁面中發(fā)送ajax的地址稍微改動(dòng)一下，如圖：

觀察代碼：我們代碼原來是直接請(qǐng)求5000端口服務(wù)器的數(shù)據(jù)，現(xiàn)在將其改成相對(duì)路徑，相對(duì)于當(dāng)前網(wǎng)頁所在的服務(wù)器，當(dāng)前的網(wǎng)頁所在的靜態(tài)服務(wù)器端口為3000。

當(dāng)我們?cè)L問：http://localhost:3000/a.html，結(jié)果如圖：

看ajax請(qǐng)求的地址是如何拼接的：

得出結(jié)論：相對(duì)路徑會(huì)被自動(dòng)拼接。

再看請(qǐng)求的結(jié)果，成功了：

成功跨域了，當(dāng)然這樣說不嚴(yán)謹(jǐn)，瀏覽器并沒有參與跨域，而是頁面中的ajax請(qǐng)求的地址還是3000端口的服務(wù)，只不過是3000端口的服務(wù)接收到請(qǐng)求，將其轉(zhuǎn)發(fā)給了5000端口的服務(wù)，并將5000端口的服務(wù)結(jié)果原封不動(dòng)的返還給了瀏覽器。

回顧上面的代碼，我們只是在靜態(tài)資源服務(wù)器中應(yīng)用了http-proxy-middleware中間件，這個(gè)中間件的使用非常簡(jiǎn)單，分為如下幾步：

1、安裝并引入到項(xiàng)目中。

2、通過app.use掛載中間件，這里需要注意的是，在掛載這個(gè)中間件的時(shí)候，app.use需要設(shè)置一個(gè)前置路由，和項(xiàng)目本來的路由作區(qū)分。

調(diào)用這個(gè)中間件的時(shí)候需要設(shè)置幾個(gè)常用參數(shù)：

1、target，指的是目標(biāo)網(wǎng)站，或者被代理的網(wǎng)站。

2、changeOrigin是否更改host。默認(rèn)為false，不重寫。

3、pathRewrite路徑重寫，這個(gè)特性看需求。

簡(jiǎn)單配置一下：

如果這樣配置，當(dāng)a.html中發(fā)送請(qǐng)求時(shí)，這樣寫：

這個(gè)請(qǐng)求會(huì)被靜態(tài)資源服務(wù)器轉(zhuǎn)化為：

http://localhost:5000/api/a

也就是說如果不設(shè)置pathRewrite的話，頁面中的請(qǐng)求地址會(huì)被原封不動(dòng)的追加到目標(biāo)服務(wù)器地址的后面。

而如果真正的接口地址是這樣的：

http://localhost:5000/b

代理服務(wù)器該如何配置呢？

此時(shí)在頁面中發(fā)送求請(qǐng)：

此時(shí)根據(jù)代理服務(wù)的重寫規(guī)則，最終請(qǐng)求的地址為：

http://localhost:5000/b

以上便是pathRewrite的作用。

接著看changeOrigin的作用，當(dāng)我們將changeOrigin設(shè)置為true時(shí)，我們?cè)诮涌诜?wù)器打印req.headers，看看結(jié)果如何:

仔細(xì)觀察host是localhost:5000,而將changeOrigin改為false呢？再次打印req.headers：

此時(shí)查看host是localhost:3000,

changeOrigin就是是否重寫請(qǐng)求頭中的host，代理服務(wù)器會(huì)在請(qǐng)求頭中加入相應(yīng)Host首部，然后目標(biāo)服務(wù)器就可以根據(jù)這個(gè)首部來區(qū)別要訪問的站點(diǎn)了。假如你在本地80端口起了apache服務(wù)器，服務(wù)器配了兩個(gè)虛擬站點(diǎn)a.com b.com,設(shè)置代理之后并且changeOrigin為true 。此時(shí)就可以正確方法訪問到虛擬主機(jī)下的文檔內(nèi)容。否則訪問a b站點(diǎn)等同于訪問localhost。當(dāng)然如果你的服務(wù)器沒有配置虛擬主機(jī)，完全可以省略這個(gè)參數(shù)，就像上面演示的代碼，完全可以省略這個(gè)參數(shù)。因?yàn)榻涌诜?wù)器并沒有設(shè)置虛擬主機(jī)。

看完上述內(nèi)容，你們對(duì)nodejs中怎么搭建一個(gè)代理服務(wù)器有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。