1. 前言

跨域，一个老生常谈的话题，不管前端后端，跨域都会遇到。而今天，我就跟大家分享一篇关于【跨域】的文章，希望能给大家带来点不一样的收获。

2. 环境说明

环境说明：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 接口，就可以添加规则来允许跨域访问，具体代码如下，大家请看：

/** * 跨域配置 */@Configurationpublic class CorsConfig implements WebMvcConfigurer {
   /**    * 跨域注册器    *    * @param registry 跨域注册器    */   @Override   public void addCorsMappings(CorsRegistry registry) {             // 设置允许跨域的路径      registry.addMapping("/**")            // 设置允许跨域请求的域名            .allowedOrigins("*")            // 是否允许证书 不再默认开启            .allowCredentials(true)            // 设置允许的方法            .allowedMethods("*")            // 设置允许的头            .allowedHeaders("*")            // 跨域允许时间            .maxAge(3600);   }}

通过上面的配置，我们可以看到，是火力全开啊，把所有的拦截都放开了，允许了所有的跨域域名等。你也可以单独设置添加，比如限制只允许 www.test.com 的域名访问，那你可以这么设置：

.allowedOrigins("http://www.test.com")

再比如限定只能对 /test 下的所有接口进行跨域访问，同时只能访问 GET 和 POST 方法，那你这样设置即可。

registry.addMapping("/test/**") .allowedMethods("POST", "GET");

... ...

    ok，以上就是我这期的全部内容啦，如果还想学习更多，你可以看看如下的往期热文推荐哦，每天积累一个奇淫小知识，日积月累下去，你一定能成为令人敬仰的大佬。

「赠人玫瑰，手留余香」，咱们下期拜拜~~