最近再熟悉公司后臺管理系統(tǒng)的前端部分（已實(shí)現(xiàn)前后端分離），使用webpack來做前端自動(dòng)化構(gòu)建（開發(fā)環(huán)境使用webpack-dev-server在本地啟動(dòng)服務(wù)進(jìn)行開發(fā)及測試）。在生產(chǎn)環(huán)境下沒有什么問題，可是在開發(fā)環(huán)境下，因?yàn)楹蠖耍╪ode.js實(shí)現(xiàn)的API使用cookie作權(quán)限驗(yàn)證），所以在開發(fā)階段想要調(diào)用后端接口就會遇到跨域的問題。網(wǎng)上有很多文章介紹使用nginx提供的web服務(wù)解決跨域問題，但是開發(fā)環(huán)境下感覺略顯麻煩。

首先介紹一下前后端分離架構(gòu)：
前端部分：
  前端框架： react.js (構(gòu)造前端單頁面應(yīng)用各個(gè)組件)
  打包工具： webpack（自動(dòng)化構(gòu)建前端工程，打包后發(fā)布  到相應(yīng)的資源服務(wù)器上）
  http-client庫： superagent（輕量級的ajax庫模擬http請求）
后端部分：
  node.js koa框架實(shí)現(xiàn)restful api(接口基于cookie作權(quán)限驗(yàn)證)

配置webpack.config.js文件
  devServer: {
    host: 'localhost', //本地webpack server域名
    port: 8888,   //本地webpack server啟動(dòng)端口
    progress: true,
    historyApiFallback: true,
    hot: true,
    inline: true,
    stats: { colors: true },
    proxy: {  //代理
      '/path/*': { //需要代理的路由， 如例配置可轉(zhuǎn)發(fā)/path/下    所有路由請求
      target: 'http://127.0.0.1:13000', //后端服務(wù)域名也可以是你本地啟動(dòng)的服務(wù)
      changeOrigin: true,
      withCredentials: true,
      secure: false
    }
  }

此配置會將前端數(shù)據(jù)的路由請求轉(zhuǎn)發(fā)到http://127.0.0.1:13000下對應(yīng)的路由上。

現(xiàn)在有個(gè)問題就是當(dāng)你訪問localhost:8888前端頁面，然后頁面中有數(shù)據(jù)請求時(shí)，superagent不會攜帶127.0.0.1:13000 的cookie信息。這個(gè)時(shí)候
本機(jī)做個(gè)域名映射，比如 app.com 到127.0.0.1

vim /etc/hosts
添加
app.com 127.0.0.1

如果瀏覽器之前訪問過app.com:13000 會存儲相應(yīng)的cookie，然后開發(fā)過程中訪問app.com:8888(本地前端應(yīng)該)中任意功能，如果功能中使用到后端提供的數(shù)據(jù)，發(fā)送請求時(shí)都會帶上之前cookie，然后app.com:13000相應(yīng)的接口就可以拿到這個(gè)cookie。 接下來就可以在本地聯(lián)調(diào)后端服務(wù)進(jìn)行開發(fā)測試了。