前端调试模式, 调后台API解决方案

• 问题概述
  在前后端分离的系统，前端开发环境采用npm run dev启动后默认访问http://localhost:8080, 前端渲染和静态资源拉去都正常，但是如果需要和后台交互, 就牵扯到跨域问题，因为浏览器默认是不支持非同源访问的。

方案一

采用jsonp方式访问，比较麻烦

1. 请求需要加header信息
2. 后台服务需要开通跨域访问
   此方法不详细介绍，自己百度

方案二

采用代理
webpack有个webpack-dev-server库，可以支持代理（webpack-dev-server是采用http-proxy-middleware来支持跨域代理的）

1. 安装npm install webpack-dev-server --save-dev
2. 在项目的config下的index.js里添加如下信息：

dev: {
    ...
    proxyTable: {
      '/api': {
        target: 'http://localhost:8081',
        pathRewrite: {'^/api' : ''},  // 路径重写，也就是说会修改最终请求的API路径。
        changeOrigin: true,     // target是域名的话，需要这个参数，
        secure: false,          // 设置支持https协议的代理
      }
    },
    ...
}

参考:
https://github.com/webpack/webpack-dev-server
https://github.com/chimurai/http-proxy-middleware