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菌
链接：
https://juejin.cn/post/7233208763921858616