跨域:是指浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制!

同源策略:是指协议(http、https、rtmp…)、域名(jd、taobao、baidu)、端口(80、8080、443)其中有一个不同都产生跨域

跨域引发的请求报错浏览器显示如下图

跨域产生的原因以及常见的解决方案_同源策略

Access to XMLHttpRequest at 'http://192.168.0.99:3331/authentication/form?username=TAO&password=123456' from origin 'http://192.168.0.99:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

在跨域请求时会有一个打头兵,这个打头兵被称为预检请求,请求方式为OPTIONS

跨域产生的原因以及常见的解决方案_同源策略_02


​官方文档跨域详细介绍​

跨域产生的原因以及常见的解决方案_跨域_03

跨域产生的原因以及常见的解决方案_同源策略_04


跨域产生的原因以及常见的解决方案_跨域_05

这里提供常见的跨域场景解决方案

1.SpringBoot单体项目前后端分离解决跨域(后续跟上)
2.微服务情况下前后端分离Gateway解决跨域(后续跟上)
3.​​前后端分离情况下微服务+Gateway+SpringSecurity解决跨域​​
4.vue配置代理解决跨域(后续跟上)
5.Nginx三方中间件决绝跨域(后续跟上)