1. 前言
跨域，一个老生常谈的话题，不管前端后端，跨域都会遇到。而今天，我就跟大家分享一篇关于【跨域】的文章，希望能给大家带来点不一样的收获。
2. 环境说明
js复制代码环境说明：Windows10 + Idea2021.3.2 + Jdk1.8 + SpringBoot 2.3.1.RELEASE
3. 什么是跨域？
首先，请问大家个问题，什么是跨域？估计很多小伙伴都会这么回答，跨域不就是只要请求的 url 不同，就会造成跨域，没错，是这样的，可否具体点？
所谓跨域，其实就好比这样，A端向B端发送请求，若B端的地址协议、域名、端口三者之间任意一个与A端的址协议、域名、端口中的一个不同，这两者访问就跨域了。
给大家举几个跨域的例子，辅助大家理解。
1.http://localhost:8080/ -> http://localhost:9090/ 跨域原因：端口号不同。
2.http://10.10.10.10:8080/ -> http://20.20.20.20:8080/ 跨域原因：主机ip(域名)不同。
3.http://localhost:8080/ -> https://localhost:8080/ 跨域原因：域名不同(http/https)。
4.www.test.com/ -> test.test.com/ 跨域原因：子域名不同。
4. 为什么会跨域？
既然清楚了跨域概念，那你们知道为何会出现跨域嘛？这其实就得从浏览器层出发了。之所以会产生跨域，就是由于浏览器的同源策略，浏览器对javascript施加的一种安全限制。
所谓同源策略，可以看成是一种约定，它是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能都可能会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的。javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议，域名和端口。
5. 如何解决跨域？
当我们对跨域概念有一定的基础认知之后，我们就应该要学习如何解决跨域这种问题，你知道跨域，但你如果不会处理跨域，那就很掉身份啦，因为解决跨域的方式很多很多，你只需要知道常用的几种处理方式就好了，又不是让自己都得掌握，对吧。
所以，接下来，我给大家诺列了解决跨域的一些方法，不要求大家都能掌握，但好歹知道这种方式能处理跨域即可。具体如下：
1.改发jsonp
利用的是 script 标签 src 属性请求 js 无跨域问题，但具有局限性，只能发送 get 请求.
2.跨域资源共享（CORS）
CORS是一个W3C标准，全称是"跨域资源共享"，它允许浏览器向跨源服务器发出XMLHttpRequest请求，从而解决了ajax只能同源使用的限制。但CORS需要浏览器和服务器都同时支持。目前，所有浏览器都支持该功能；支持各种方式请求(post,get....)。
3.nginx代理跨域
将不同的协议、域名、端口代理到与目标url一致的处理方式。
4.nodejs中间件代理跨域
在本地启一个nodeis服务器转接代理，前端请求本地服务器，可在自己代码中设置跨域可访问，而后端转接请求后端是没有跨域问题的(需要真实请求的地址设置可访问才可取得数据)。
5.WebSocket协议跨域
它是一种浏览器的API，它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)web sockets原理：在JS创建了web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。 只有在支持web socket协议的服务器上才能正常工作。
6. springboot跨域配置
接着，我们通过在springboot项目中配置cors，起到防止跨域的目的。由于springboot本身就支持cors，所以你只需要实现 addCorsMappings 接口，就可以添加规则来允许跨域访问，具体代码如下，大家请看：
typescript复制代码/** * 跨域配置 */ @Configuration public class CorsConfig implements WebMvcConfigurer { /** * 跨域注册器 * * @param registry 跨域注册器 */ @Override public void addCorsMappings(CorsRegistry registry) { // 设置允许跨域的路径 registry.addMapping("/**") // 设置允许跨域请求的域名 .allowedOrigins("*") // 是否允许证书 不再默认开启 .allowCredentials(true) // 设置允许的方法 .allowedMethods("*") // 设置允许的头 .allowedHeaders("*") // 跨域允许时间 .maxAge(3600); } }
通过上面的配置，我们可以看到，是火力全开啊，把所有的拦截都放开了，允许了所有的跨域域名等。你也可以单独设置添加，比如限制只允许www.test.com的域名访问，那你可以这么设置：
arduino复制代码.allowedOrigins("http://www.test.com")
再比如限定只能对 /test 下的所有接口进行跨域访问，同时只能访问 GET 和 POST 方法，那你这样设置即可。
arduino复制代码registry.addMapping("/test/**") .allowedMethods("POST", "GET");
... ...
ok，以上就是我这期的全部内容啦，如果还想学习更多，你可以看看如下的往期热文推荐哦，每天积累一个奇淫小知识，日积月累下去，你一定能成为令人敬仰的大佬。
「赠人玫瑰，手留余香」，咱们下期拜拜~~
本文就是愿天堂没有BUG给大家分享的内容，大家有收获的话可以分享下，想学习更多的话可以到微信公众号里找我，我等你哦。
