为什么后端要配置跨域？原创

Hello，大家好，我是小石啊，就是原来小石第一次和前端同学联调的时候就然后就报错了嘛，然后他们就跟小石说去把项目中的跨域配好，其实我当初并不知道跨域是怎么回事，然后就找了一下我们的leader，然后他就让我在代码中添加一一下如下的这种。如下的配置，然后这个跨域问题就解决好了。所以说我们今天就来聊一聊这个跨域问题是怎么造成的。好吧，因为现在绝大多数公司的项目都是前后端分离的，前后端分离的话都会遇到会会遇到一个跨域问题啊，这一欢嗯，报错的时候也基本上一下就能看出来，它就是这个has been blocked by cross这个，然后no access control，然后没有这个hi吧，一般就是然后的话，一般提示消息，会提示消息一般就是这个网络错误啊，所以说你和前段联系的时候，一直拖着提示这个，呃，提示报报这种信息，或者提示那种网络错误的话，一般情况下就是后端没有做跨域配置啊，注意此时并不是后端没有收到请求，而收到请求的返回结果了，但是浏览器他把这个结果给拦截了，并且报错。

就是浏览器为什么要会会报错呢？因为浏览器它基于安安全的考虑，它引入了一个同源的策略啊，就同源的策略是什么呢？就是当域名，当协议、域名、端口三者都相同时，才不会产生跨域问题及同源，此时才能读到那个服务端的响应，呃，我举个例子，就是当前这个UR和这个UR，你看这个UR它这个协议是不同的，所以说它会造成跨域啊，就是它的这个协议不同HTPS，一个是HTP。然后这个是它的域名不同，一个是3W点，一个是book点，然后这个的话是端口不同，这个默认的话是八零端口，这个是8000端口，所以它会有跨域的问题啊，就是它浏览器为什么要会会要有同源，会有这个同源策略呢？就是它主要就是为了安全起见，举个例子啊，就是以银行的转站为例啊，就是如果没有同样这个策略啊，你的钱会很容易就被丢失啊，第一步就是你浏览并登录信任网站A，就是你进了银行的网站了，登录了，然后验证通过，它肯定会给你设置cookie嘛，然后第三步你在没有登出A网站的情况下，访问一个呃微享的网站B，它是一个调研网站，然后他这个向网站A发出转账请求，然后第五步带着二厂商的库给根据四。

的请求访问A，然后此时你的前辈就被转走了吗？这个就是著名的这个跨站请求伪造啊。对，这种还有很多方式啊，如果第五步的话，不对这个来源进行校验，就是你的钱很容易被丢失啊，就是但是在HTM中如有如下几个页面是允允许跨域加载跨域加载资源的，就是这这种，那如何加解决跨域呢？就是同源策略保证了安全，那有一定合理性的用途也会受到影响，假如说你的前端项目在A域名下，就是然后发了一个阿贾克斯请求到B域名，B域名是我们的哦，后端服务嘛，然后由于同源策略的话，我们的阿贾克斯请求会报错，就是不能正常的请求接口。

就是解决跨域的方式有很多种，我就介绍两个，介绍一个吧，这个G3P的话现在也很少用了，第二个的话就是主要就是这个CS。CS呢分为两种情况啊，就是我们来看一下这种分为两种情况，一种就是非简单请求，一种简单请求就是就是在正式的跨域访问，在正式的跨域请求前，就是客户端会发送一个option请求，去询问服务端是否接接受，是否接受接下来的跨域请求携带如下的hier，就是他表明自己携带请求发起的域。

就是表明自己来自哪，然后发起话语请求的方法。对，Get还是post，然后。它包含了请求头字段，然后服务区中会增加如下的hier来表明它是否允许这个话语请求。如果不允许的话，不符合的话，然后他就不会发起这个后续的请求啊，第一个的话就是这个允许来自允许哪些域来访问，就是新表示所有域的请求，然后就是允许他的哪些请求方式，允许他的哪些请求和字段，允许他是否允许他携带cooking，你看，但是他这个就比较麻烦，每次发一个请求他得去，他得有两个步骤，第一个发option，然后后面才是一个真正的就是。比较麻烦，麻烦嘛，所以他就做了优化，就是当请求方法是这三种请求头只有如下几个时，它会被并定义为简单请求，简单请求的话就是在会在请求中直接加入，直接加入一个origin头啊，它就直接发起，就直接发起调用了，不会先循环，然后后端会返回相应的这些hi，然后浏览器在浏览器减。

如果浏览器检查到这个这个它的来源不符合要求的话，就会报错。所以说我们看看啊。其实这种跨域，所以说我们理解了这个整个跨域请求的步骤，就是我们就可以知道。各种配置啊，就是支持跨域的配置啊，其实就是往response中增加hier，增加这种hier来来表明服务端的行为，你看一般的话，第一种方式我们利用filter。它本质上就是一个filter，然后你可以看一下我这儿反了一个这个这个就可以，对对一些我们的域名是不是这些访问的，访问的这个请求是不是在我们的白名单内吧，这个我直接就是。

啊对，就直接简单做了一个判断嘛，没有做详细的，然后你看我就在response中设置了这个允许的哈，他来自哪就都可以允许，然后这个是可以他设置cooking，这个是它对反正它所有的和method都支持啊，然后这个这个的话，你看我设置了一个这个就是access control max maxage表明了询问结果的有效期限，就是在3600秒之内，浏览器就访问这个的时候，在它就不。没有必要再询问了啊，就是这个已经有了。没有必要再询问了。但是这个这种方式的话，我们一般不常用，但是你可以试一下，一般的话呢，我们一般的话，我们就是直接配一个这个就是spring Mac默认支持了嘛，它就默认加了这些配置，然后它就会自动给你加上hier嘛，你可以看一下这个这个和形式和我刚才的这些差不多嘛，就是映色路径允许的是否带哭点允许请求的方式，允许的请求投。

对，这些都差不多，然后另一个的话就是利用这个，呃，利用这个注解嘛，就是更细力度的配置，用在方法上或者类上，就是当时一般情况下，我我猜你们项目啊，就是很少会配置这个跨域请求的啊，因为这个跨域请求他一般都会在网关中做了，就是包括设呃，由那些NSO之类的网关来帮你设置这些hier，这样的话你就不用在每个项目中都配置这种跨域的请求。所以说你一般在你们生产项目中也一般看不到这种跨域的配置啊。好吧，然后今天对了，然后我这篇文章的话是放到我这个加入面试通关100问中了。嗯，如果想获取这篇文章的话，可以点击头像私信回复专栏，然后免费领取啊好吧，然后我们今天视频就到这里了，如果有帮助到你的话，欢迎点赞关注转发，我们下期见喽，拜拜。