題圖 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