最近再熟悉公司后臺管理系統(tǒng)的前端部分（已實現(xiàn)前后端分離）丸卷，使用webpack來做前端自動化構建（開發(fā)環(huán)境使用webpack-dev-server在本地啟動服務進行開發(fā)及測試）。在生產(chǎn)環(huán)境下沒有什么問題萎坷，可是在開發(fā)環(huán)境下沐兰，因為后端（node.js實現(xiàn)的API使用cookie作權限驗證），所以在開發(fā)階段想要調用后端接口就會遇到跨域的問題住闯。網(wǎng)上有很多文章介紹使用nginx提供的web服務解決跨域問題澳淑，但是開發(fā)環(huán)境下感覺略顯麻煩偶惠。
首先介紹一下前后端分離架構：
前端部分：
前端框架： react.js (構造前端單頁面應用各個組件)
打包工具： webpack（自動化構建前端工程朗涩，打包后發(fā)布 到相應的資源服務器上）
http-client庫： superagent（輕量級的ajax庫模擬http請求）
后端部分：
node.js koa框架實現(xiàn)restful api(接口基于cookie作權限驗證)
配置webpack.config.js文件
devServer: {
host: 'localhost', //本地webpack server域名
port: 8888, //本地webpack server啟動端口
progress: true,
historyApiFallback: true,
hot: true,
inline: true,
stats: { colors: true },
proxy: { //代理
'/path/*': { //需要代理的路由， 如例配置可轉發(fā)/path/下 所有路由請求
target: 'http://127.0.0.1:13000', //后端服務域名也可以是你本地啟動的服務
changeOrigin: true,
withCredentials: true,
secure: false
}
}
此配置會將前端數(shù)據(jù)的路由請求轉發(fā)到http://127.0.0.1:13000下對應的路由上兄一。
現(xiàn)在有個問題就是當你訪問localhost:8888前端頁面识腿，然后頁面中有數(shù)據(jù)請求時，superagent不會攜帶127.0.0.1:13000 的cookie信息骂束。這個時候
本機做個域名映射成箫，比如 app.com 到127.0.0.1
vim /etc/hosts
添加
app.com 127.0.0.1
如果瀏覽器之前訪問過app.com:13000 會存儲相應的cookie，然后開發(fā)過程中訪問app.com:8888(本地前端應該)中任意功能混驰，如果功能中使用到后端提供的數(shù)據(jù)皂贩，發(fā)送請求時都會帶上之前cookie，然后app.com:13000相應的接口就可以拿到這個cookie婴栽。 接下來就可以在本地聯(lián)調后端服務進行開發(fā)測試了辈末。
