说起"跨域",大家肯定感觉既熟悉又陌生,因为自己可能有些印象,但是具体说说又说不太清楚,我前段时间也是遇到了这个问题,就此来总结下。
出现问题的场景:
我们有一个后台管理系统,使用的技术是vue(iview)+axios+springmvc,在本地访问没有问题,到了生产环境报了跨域的错,报错信息如下:
其实我们在前后端都做了跨域相关的配置,按理说没有什么问题,我最开始也是直接拿着报错信息各种百度、谷歌,发现优质的帖子真的很好,修改了一次又一次,一直都无法解决,后来系统的看了下跨域的知识,又联系我们现在遇到问题的场景终于解决了问题,我把我排查问题的全流程分享下,希望对遇到类似问题的伙伴有帮助。
伴随着上述报错信息,还有一个现象,就是浏览器在请求后端接口的时候,会发送两个请求,一个options请求,一个post请求,options请求成功,post请求没有发起,带着上述问题我们先了解下跨域的基础知识。
什么是跨域:
如何解决跨域:
1.前端解决跨域
配置一台代理服务器,通过代理服务器请求其他服务器,返回结果到代理服务器然后再给到浏览器,一般会使用nigix做代理服务器。
2.前后端解决跨域
前端配置:
axios.defaults.withCredentials = true
axios.defaults.crossDomain = true
后端配置:
现在回来看看我遇到的那个问题,前端调用如图:
发起一个option请求,目的在于看后端服务器是否支持请求中的headers、methods。
以上相应中返回后端支持的类型,如果包括你请求时的参数,那么浏览器会发起第二次post真实请求,我之前就是在后端过滤器配置了*,但是没有生效,枚举出来headers、methods就可以通过跨域。
很经典的一张图:
如果你想了解更多的跨域知识,请查看官网https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS,如果你也遇到了类似的问题,欢迎留言一起讨论。