Spring Boot：如何解决跨域问题 ?

待我称王封你为后i 2022-11-16 13:47 205阅读 0赞

**目录**

跨域问题现象

跨域问题分析

什么是源和跨域

什么是同源策略？

Spring Boot：跨域问题解决

1. 创建一个filter解决跨域

2. 基于WebMvcConfigurerAdapter配置加入Cors的跨域

3. controller配置CORS

@CrossOrigin不起作用的原因

--------------------

# ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZseTkxMDkwNQ_size_16_color_FFFFFF_t_70][] #

# 跨域问题现象 #

> been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

上面的意思就是  你访问一个什么地址被CORS 协议阻止， 没有 在Hearder 里面发现 Access-Control-Allow-Origin 的参数的 资源

# 跨域问题分析 #

跨域问题的原因：**浏览器出于安全考虑，限制访问本站点以为的资源**。

比如你有一个 网站 127.0.0.1:8080/ , 并且上面挂了一个页面 ，那么在这个页面中 ，你只访问 本站点的 资源不会受到限制，但是你如果访问其他站点，比如  127.0.0.1:8081 的资源就会受到限制。

> 备注：暂且把  协议，域名，端口都一样的叫做同一个站点。

但是  带有 src 属性的标签可以没有这个 限制，比如 img ，script  等等。

在说说历史，以前的程序前后端不分离， 页面 和 请求接口，在同一个 域名同一个端口下面。 所有 浏览器认为来源这个 站点的页面 ，请求的是同一个站点的 接口，那么久会允许。

比如 127.0.0.1:8080/index.html  ,请求 127.0.0.1:8080/a/b/c/userLit 接口，这样是可以的

在说说现在，**前后点分离，页面 和接口一般不是一个程序，这样就不允许，就会抛出这个异常**。

## 什么是源和跨域 ##

源（origin）就是协议、域名和端口号。  
URL由协议、域名、端口和路径组成，**如果两个URL的协议、域名和端口全部相同，则表示他们同源**。否则，只要协议、域名、端口有任何一个不同，就是跨域。

对https://www.baidu.com/index.html进行跨域比较：

<table> 
 <thead> 
  <tr> 
   <th>URL</th> 
   <th>是否跨域</th> 
   <th>原因</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>https://www.baidu.com/more/index.html</td> 
   <td>不跨域</td> 
   <td>三要素相同</td> 
  </tr> 
  <tr> 
   <td>https://map.baidu.com/</td> 
   <td>跨域</td> 
   <td>域名不同</td> 
  </tr> 
  <tr> 
   <td>http://www.baidu.com/index.html</td> 
   <td>跨域</td> 
   <td>协议不同</td> 
  </tr> 
  <tr> 
   <td>https://www.baidu.com:81/index.html</td> 
   <td>跨域</td> 
   <td>端口号不同</td> 
  </tr> 
 </tbody> 
</table>

## 什么是同源策略？ ##

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

同源策略又分为以下两种：

1.  DOM同源策略：禁止对不同源页面DOM 进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的。
2.  XMLHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求。

#  Spring Boot：跨域问题解决 #

## 1. 创建一个filter解决跨域 ##

项目中**前后端分离部署**，所以需要解决跨域的问题。 我们使用cookie存放用户登录的信息，在spring拦截器进行权限控制，当权限不符合时，直接返回给用户固定的json结果。 当用户登录以后，正常使用；当用户退出登录状态时或者token过期时，**由于拦截器和跨域的顺序有问题，出现了跨域的现象**。 我们知道一个http请求，先走filter，到达servlet后才进行拦截器的处理，**如果我们把cors放在filter里，就可以优先于权限拦截器执行**。

@Configuration
    public class CorsConfig {
    
        @Bean
        public CorsFilter corsFilter() {
            CorsConfiguration corsConfiguration = new CorsConfiguration();
            corsConfiguration.addAllowedOrigin("*");
            corsConfiguration.addAllowedHeader("*");
            corsConfiguration.addAllowedMethod("*");
            corsConfiguration.setAllowCredentials(true);
            
            UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
            urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
            return new CorsFilter(urlBasedCorsConfigurationSource);
        }
    
    }

## 2. 基于WebMvcConfigurerAdapter配置加入Cors的跨域 ##

跨域可以在**前端通过 JSONP 来解决**，但是 **JSONP 只可以发送 GET 请求**，无法发送其他类型的请求，在 RESTful 风格的应用中，就显得非常鸡肋，因此我们推荐**在后端通过 （CORS，Cross-origin resource sharing） 来解决跨域问题**。这种解决方案并非 Spring Boot 特有的，在传统的 SSM 框架中，就可以通过 CORS 来解决跨域问题，只不过之前我们是在 XML 文件中配置 CORS ，现在可以通过**实现WebMvcConfigurer接口然后重写addCorsMappings方法解决跨域问题**。

@Configuration
    public class CorsConfig implements WebMvcConfigurer {
    
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("*")
                    .allowCredentials(true)
                    .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                    .maxAge(3600);
        }
    
    }

## 3. controller配置CORS ##

controller方法的CORS配置，您可以向@RequestMapping注解处理程序方法添加一个@CrossOrigin注解，以便启用CORS（默认情况下，@CrossOrigin允许在@RequestMapping注解中指定的所有源和HTTP方法）：

@RestController
    @RequestMapping("/account")
    public class AccountController {
    
        @CrossOrigin
        @GetMapping("/{id}")
        public Account retrieve(@PathVariable Long id) {
            // ...
        }
    
        @DeleteMapping("/{id}")
        public void remove(@PathVariable Long id) {
            // ...
        }
    }

其中@CrossOrigin中的参数：

>  @CrossOrigin 表示所有的URL均可访问此资源 @CrossOrigin(origins = “http://127.0.0.1:8080”)//表示只允许这一个url可以跨域访问这个controller 代码说明：@CrossOrigin这个注解用起来很方便，这个可以用在方法上，也可以用在类上。如果你不设置他的value属性，或者是origins属性，就默认是可以允许所有的URL/域访问。
> 
> 1.  value属性可以设置多个URL。
> 2.  origins属性也可以设置多个URL。
> 3.  maxAge属性指定了准备响应前的缓存持续的最大时间。就是探测请求的有效期。
> 4.  allowCredentials属性表示用户是否可以发送、处理 cookie。默认为false
> 5.  allowedHeaders 属性表示允许的请求头部有哪些。
> 6.  methods 属性表示允许请求的方法，默认get，post，head。

### @CrossOrigin不起作用的原因 ###

1、是springMVC的版本要在4.2或以上版本才支持@CrossOrigin

2、非@CrossOrigin没有解决跨域请求问题，而是不正确的请求导致无法得到预期的响应，导致浏览器端提示跨域问题。

3、在Controller注解上方添加@CrossOrigin注解后，仍然出现跨域问题，解决方案之一就是：

在@RequestMapping注解中没有指定Get、Post方式，具体指定后，问题解决。

类似代码如下：

@CrossOrigin
    @RestController
    public class person{
        
        @RequestMapping(method = RequestMethod.GET)
        public String add() {
            // 若干代码
        }
    }

参考链接：

[https://www.cnblogs.com/haha12/p/10564972.html][https_www.cnblogs.com_haha12_p_10564972.html]

[https://www.cnblogs.com/mmzs/p/9167743.html\#\_label1\_0][https_www.cnblogs.com_mmzs_p_9167743.html_label1_0]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZseTkxMDkwNQ_size_16_color_FFFFFF_t_70]: /images/20221022/2a32c9c480da4d0dbaec5d539100a482.png
[https_www.cnblogs.com_haha12_p_10564972.html]: https://www.cnblogs.com/haha12/p/10564972.html
[https_www.cnblogs.com_mmzs_p_9167743.html_label1_0]: https://www.cnblogs.com/mmzs/p/9167743.html#_label1_0