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复制代码/** * 跨域配置 */@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的域名访问，那你可以这么设置：

arduino复制代码.allowedOrigins(\"http://www.test.com\")

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

arduino复制代码registry.addMapping(\"/test/**\") .allowedMethods(\"POST\", \"GET\");

... ...

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

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

作者：bug菌 链接：https://juejin.cn/post/7233208763921858616