最近再熟悉公司后台管理系统的前端部分（已实现前后端分离），使用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。 接下来就可以在本地联调后端服务进行开发测试了。
