本文主要是介绍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'个人觉得原理就是：我们的本地服务器将请求转发给了目标服务器。而出行跨域的问题报错是因为浏览器有同源策略的限制，但服务器是没有的。
借鉴一位网友的理解：
本地服务器 –》 代理 –》目标服务器 –》拿到数据后通过代理伪装成本地服务请求的返回值 —》然后浏览器就顺利收到了我们想要的数据
这篇关于vuecli开发环境配置proxyTable实现跨域的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
