http-proxy

http-proxy是一個nodejs的http代理庫，已經被webpack-dev-server集成進來，做代理使用。原因是在前后端分離大行其道的今天，我們如果需要在本地調后端api接口，不配置hostname的話，必然是一個跨域的請求。因為瀏覽器的跨域安全限制，調取是不通的，所以本地代理就成了一個本地開發環境的必選項。

'/saasapi/*': {
 target: 'http://ebk.17u.cn',
},

意思呢大概就是把saasapi開頭的ajax請求重定向到http://ebk.17u.cn

本地開發沒有問題，線上如果也是用nodejs的服務器，如果恰巧也配置了代理，部署到線上出現了意想不到的問題~

后端nginx配置了反向代理

一個網站主域名是17u.cn，后端如果部署了多個api服務，那這樣子他的api服務可能是這樣子

前端同樣部署了3個nodejs服務，也同樣配置了3個代理。部署到線上卻發現，請求總是指向第一個二級域名，其他的二級域名訪問不到。

百思不得姐！

后來仔細查看http的信息，發現幾個服務的ajax請求發到服務器上之后，hostname都是瀏覽器的域名，而nginx的反向代理配置都是根據hostname來做轉發的。因為我們的hostname對于nginx來說都是陌生的，所以就默認轉發到默認的第一個服務上去了。

查了http-proxy配置，哈哈，果然有這種修改的配置，只要稍微改一下就好了。

'/saasapi/*': {
 target: 'http://ebk.17u.cn',
 changeOrigin: true
},

changeOrigin: true意思就是把hostname改為和target一致就可以了。這樣后端nginx就可以正常轉發了。

后端配置了cookie Path

后端api，不僅僅配置了二級域名，還配置了二級目錄，前端部署的服務也一樣需要二級目錄。

api地址就變成這個樣子：

ebk.17u.cn/saasapi

前端地址：

trans.17u.cn/saas

代理配置做對應調整

'/saas/saasapi/*': {
 target: 'http://ebk.17u.cn',
 changeOrigin: true,
 rewrite: path => path.replace(/^\/saas\/saasapi\/cxy/, '/saasapi')
},

這樣子看起來很正常吧，但是問題出在哪呢？后端把登錄之后設置的cookie也設置了path：Path='/saasapi'。

這樣子問題就來了，trans.17u.cn/saas當前域名下讀取不到/saasapi下面的cookie，導致前端登錄每次都通過，但就是不能正常調api，每次調取都提示沒有登錄。

有問題還是先查文檔。

還是發現了解決方案

cookiePathRewrite: { '/saasapi': '/saas/saasapi' }

重寫cookie路徑就好了，同理如果后端接口指定了cookie的domain，一樣有方案解決

cookieDomainRewrite

還有一些其他rewrite，應該都比較好用的。

ps：在解決過程中，發現改了也總是不能成功，一度懷疑是庫的bug。后來發現需要清除掉chrome的cookie。

直接點Application -> Cookie:刪除下面的cookie是不行的。清理不掉全部的cookie，需要到Application -> clear storage中，clear site data才可以。最終成功

相關推薦：

Js中前端模塊化的詳細分析及其區別對比

jQuery中的方法有哪些?jQuery中常用的方法（附代碼）

jQuery對象與原生DOM對象之間的區別及轉換

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com