react.js + webpack + superagent 开发环境下如何跨域发送cookie

最近再熟悉公司后台管理系统的前端部分（已实现前后端分离），使用webpack来做前端自动化构建（开发环境使用webpack-dev-server在本地启动服务进行开发及测试）。在生产环境下没有什么问题，可是在开发环境下，因为后端（node.js实现的API使用cookie作权限验证），所以在开发阶段想要调用后端接口就会遇到跨域的问题。网上有很多文章介绍使用nginx提供的web服务解决跨域问题，但是开发环境下感觉略显麻烦。

首先介绍一下前后端分离架构：
前端部分：
  前端框架： react.js (构造前端单页面应用各个组件)
  打包工具： webpack（自动化构建前端工程，打包后发布  到相应的资源服务器上）
  http-client库： superagent（轻量级的ajax库模拟http请求）
后端部分：
  node.js koa框架实现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/*': { //需要代理的路由， 如例配置可转发/path/下    所有路由请求
      target: 'http://127.0.0.1:13000', //后端服务域名也可以是你本地启动的服务
      changeOrigin: true,
      withCredentials: true,
      secure: false
    }
  }

此配置会将前端数据的路由请求转发到http://127.0.0.1:13000下对应的路由上。

现在有个问题就是当你访问localhost:8888前端页面，然后页面中有数据请求时，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，然后开发过程中访问app.com:8888(本地前端应该)中任意功能，如果功能中使用到后端提供的数据，发送请求时都会带上之前cookie，然后app.com:13000相应的接口就可以拿到这个cookie。 接下来就可以在本地联调后端服务进行开发测试了。