題圖 From 極客時間 From Clm

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

1、jsonp

2、cors

3、配置代理服務器。

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

相對于前兩種，使用代理服務器解決跨域問題就簡單了好多。

瀏覽器由于同源策略的原因，不同域名之間發送ajax請求，響應的數據不會被瀏覽器加載。而服務器向服務器發送請求則沒有同源策略的限制。

下圖便是代理服務器的原理了：

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

首先第一步我們先用express搭建兩個服務器，一個靜態資源服務器端口號為3000，一個接口服務器端口號為5000，靜態資源服務器代碼如下：

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

并且在public文件夾下新建a.html，并且在頁面中使用jquery，使用jquery發送ajax向接口服務器發送測試請求。

a.html代碼如下：

接著搭建接口服務器，接口服務器端口號為5000，代碼如下：

觀察代碼，我們設計了三個接口，都是get請求，只是url不同。

此時啟動靜態資源服務器和接口服務器，然后訪問靜態資源服務器下面的a.html，結果如圖：

如圖所示，發生跨域了，此時在靜態資源服務器中安裝http-proxy-middleware中間件，并將其集成到靜態資源服務器中。

代碼如下：

此時重啟靜態資源服務器，并將啊，a.html頁面中發送ajax的地址稍微改動一下，如圖：

觀察代碼：我們代碼原來是直接請求5000端口服務器的數據，現在將其改成相對路徑，相對于當前網頁所在的服務器，當前的網頁所在的靜態服務器端口為3000。

當我們訪問：http://localhost:3000/a.html，結果如圖：

看ajax請求的地址是如何拼接的：

得出結論：相對路徑會被自動拼接。

再看請求的結果，成功了：

成功跨域了，當然這樣說不嚴謹，瀏覽器并沒有參與跨域，而是頁面中的ajax請求的地址還是3000端口的服務，只不過是3000端口的服務接收到請求，將其轉發給了5000端口的服務，并將5000端口的服務結果原封不動的返還給了瀏覽器。

回顧上面的代碼，我們只是在靜態資源服務器中應用了http-proxy-middleware中間件，這個中間件的使用非常簡單，分為如下幾步：

1、安裝并引入到項目中。

2、通過app.use掛載中間件，這里需要注意的是，在掛載這個中間件的時候，app.use需要設置一個前置路由，和項目本來的路由作區分。

調用這個中間件的時候需要設置幾個常用參數：

1、target，指的是目標網站，或者被代理的網站。

2、changeOrigin是否更改host。默認為false，不重寫。

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

簡單配置一下：

如果這樣配置，當a.html中發送請求時，這樣寫：

這個請求會被靜態資源服務器轉化為：

http://localhost:5000/api/a

也就是說如果不設置pathRewrite的話，頁面中的請求地址會被原封不動的追加到目標服務器地址的后面。

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

http://localhost:5000/b

代理服務器該如何配置呢？

此時在頁面中發送求請：

此時根據代理服務的重寫規則，最終請求的地址為：

http://localhost:5000/b

以上便是pathRewrite的作用。

接著看changeOrigin的作用，當我們將changeOrigin設置為true時，我們在接口服務器打印req.headers，看看結果如何:

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

此時查看host是localhost:3000,

changeOrigin就是是否重寫請求頭中的host，代理服務器會在請求頭中加入相應Host首部，然后目標服務器就可以根據這個首部來區別要訪問的站點了。假如你在本地80端口起了apache服務器，服務器配了兩個虛擬站點a.com b.com,設置代理之后并且changeOrigin為true 。此時就可以正確方法訪問到虛擬主機下的文檔內容。否則訪問a b站點等同于訪問localhost。當然如果你的服務器沒有配置虛擬主機，完全可以省略這個參數，就像上面演示的代碼，完全可以省略這個參數。因為接口服務器并沒有設置虛擬主機。

以上便是用nodejs搭建代理服務器的知識了，這個http-proxy-middleware中間件用的很廣泛，在vue-cli或者create-react-app生成的項目中都內置了這個中間件，配置規則基本和上面相同，大家有問題可以留言。

每天進步一點點，大家共勉，雖然放假了，但是不能松懈呀。

代碼地址https://github.com/clm1100/corsAndProxy/tree/master/proxy

https://segmentfault.com/q/1010000005271156

https://segmentfault.com/q/1010000012607105

堅持下去就能成功

總結

以上是生活随笔為你收集整理的用nodejs搭建代理服务器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。