axios代理跨域 cli4_Cross-Origin Resource Sharing (CORS)-跨域

说起"跨域"，大家肯定感觉既熟悉又陌生，因为自己可能有些印象，但是具体说说又说不太清楚，我前段时间也是遇到了这个问题，就此来总结下。

出现问题的场景：

我们有一个后台管理系统，使用的技术是vue(iview)+axios+springmvc，在本地访问没有问题，到了生产环境报了跨域的错，报错信息如下：

cors enable in Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response

其实我们在前后端都做了跨域相关的配置，按理说没有什么问题，我最开始也是直接拿着报错信息各种百度、谷歌，发现优质的帖子真的很好，修改了一次又一次，一直都无法解决，后来系统的看了下跨域的知识，又联系我们现在遇到问题的场景终于解决了问题，我把我排查问题的全流程分享下，希望对遇到类似问题的伙伴有帮助。

伴随着上述报错信息，还有一个现象，就是浏览器在请求后端接口的时候，会发送两个请求，一个options请求，一个post请求，options请求成功，post请求没有发起，带着上述问题我们先了解下跨域的基础知识。

什么是跨域：

1. 跨域指浏览器不能执行其他网站的脚本，它是由浏览器的同源策略引起的，是浏览器对JS的安全限制。
2. 同源策略是指协议、域名、端口都要相同，任一不同都会发生跨域问题。服务器之间可以相互请求数据，不存在跨域的问题。

如何解决跨域：

1.前端解决跨域

配置一台代理服务器，通过代理服务器请求其他服务器，返回结果到代理服务器然后再给到浏览器，一般会使用nigix做代理服务器。

2.前后端解决跨域

前端配置：

axios.defaults.withCredentials = trueaxios.defaults.crossDomain = true

后端配置：

现在回来看看我遇到的那个问题，前端调用如图：

发起一个option请求，目的在于看后端服务器是否支持请求中的headers、methods。

以上相应中返回后端支持的类型，如果包括你请求时的参数，那么浏览器会发起第二次post真实请求，我之前就是在后端过滤器配置了*，但是没有生效，枚举出来headers、methods就可以通过跨域。

很经典的一张图：

如果你想了解更多的跨域知识，请查看官网https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS，如果你也遇到了类似的问题，欢迎留言一起讨论。

更多请关注公众号：别明天就今天吧