vuecli开发环境配置proxyTable实现跨域

一直也看到过proxyTable可以配置跨域，但是项目上都是统一交给后台处理的，本人也懒，就一直没管，最近换了项目，自己搭建的一套vue项目，发现配置这个的时候还出问题了，仅记录一下。

在调试api的过程中，发现报错了：Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.，解释：浏览器是会先发一次options请求，如果请求通过，则继续发送正式的post请求，而如果不通过则返回以上错误，最好的方法是后台进行配置：

        // TODO 支持跨域访问
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type");
        response.setHeader("Access-Control-Expose-Headers", "*");

        if (request.getMethod().equals("OPTIONS")) {
            HttpUtil.setResponse(response, HttpStatus.OK.value(), null);
            return;
        }

// 上面代码需要加入允许的头部，content-type和access-token，
并且判断请求的方法是options的时候，返回ok（200）给客户端，
这样才能继续发正式的post请求。

其实前台自己也是可以在开发环境中，自己配置的。在 config目录下的index.js 中，

配置proxyTable，官网文档：https://vuejs-templates.github.io/webpack/proxy.html

当然我上面的写法是对  /mro-web 接口的代理，我实际请求是对axios进行封装

这样我实际请求的时候，就相当于将 http:.// xxxx 请求转为和自己本地域名一致的请求

'http://localhost:8080/wro-web/xxx' ===> 'http://服务器域名/wro-web/xxx'

个人觉得原理就是：我们的本地服务器将请求转发给了目标服务器。而出行跨域的问题报错是因为浏览器有同源策略的限制，但服务器是没有的。

借鉴一位网友的理解：

本地服务器 –》 代理 –》目标服务器 –》拿到数据后通过代理伪装成本地服务请求的返回值 —》然后浏览器就顺利收到了我们想要的数据