http-proxy是一個nodejs的http代理庫,已經被webpack-dev-server集成進來,作代理使用。緣由是在先後端分離大行其道的今天,咱們若是須要在本地調後端api接口,不配置hostname的話,必然是一個跨域的請求。由於瀏覽器的跨域安全限制,調取是不通的,因此本地代理就成了一個本地開發環境的必選項。前端
'/saasapi/*': { target: 'http://ebk.17u.cn', },
意思呢大概就是把saasapi開頭的ajax請求重定向到http://ebk.17u.cn
node
本地開發沒有問題,線上若是也是用nodejs的服務器,若是恰巧也配置了代理,部署到線上出現了意想不到的問題~webpack
一個網站主域名是17u.cn,後端若是部署了多個api服務,那這樣子他的api服務多是這樣子nginx
主域名 | 二級域名1 | 二級域名2 | 二級域名3 |
---|---|---|---|
17u.cn | ebk.17u.cn | ebk2.17u.cn | ebk3.17u.cn |
前端一樣部署了3個nodejs服務,也一樣配置了3個代理。部署到線上卻發現,請求老是指向第一個二級域名,其餘的二級域名訪問不到。web
百思不得姐!ajax
後來仔細查看http的信息,發現幾個服務的ajax請求發到服務器上以後,hostname都是瀏覽器的域名,而nginx的反向代理配置都是根據hostname來作轉發的。由於咱們的hostname對於nginx來講都是陌生的,因此就默認轉發到默認的第一個服務上去了。chrome
查了http-proxy配置,哈哈,果真有這種修改的配置,只要稍微改一下就行了。後端
'/saasapi/*': { target: 'http://ebk.17u.cn', changeOrigin: true },
changeOrigin: true
意思就是把hostname改成和target一致就能夠了。這樣後端nginx就能夠正常轉發了。api
後端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才能夠。最終成功