跨域问题与SpringBoot解决方案

落日映苍穹つ 2023-09-28 08:03 10阅读 0赞

## 什么是跨域 ##

定义：**浏览器从一个域名的网页取请求另一个域名下的东西**。通俗点说，**浏览器直接从A域访问B域中的资源是不被允许的，如果想要访问，就需要进行一步操作，这操作就叫“跨域”**。例如，你从百度的页面，点击一个按钮，请求了新浪的一个接口，这就进行了跨域。不单单只有域名不同就是跨域，域名、端口、协议其一不同就是不同的域，请求资源需要跨域。

## 为什么要跨域 ##

为什么需要跨域，而不直接访问其他域下的资源呢？这是浏览器的限制，**专业点说叫浏览器同源策略限制**。主要是为了安全考虑。现在的安全框架，一般请求的时候header中不是都存个token嘛，你要是用这个token去正常访问A域下的东西是没问题的，然后又去访问了B域，结果阴差阳错的还带着这个token，那么B域，或者说B网站是不是就可以拿着你的token去A域下做点什么呢，这就相当危险了。所以浏览器加上了所谓的浏览器同源策略限制。**但是为了我们真的需要从A域下访问B的资源（正常访问），就需要用到跨域，跨越这个限制了**。、

## SpringBoot解决跨域问题 ##

SpringBoot可以基于Cors解决跨域问题，Cors是一种机制，告诉我们的后台，哪边（origin ）来的请求可以访问服务器的数据。

### 实现WebMvcConfigurer接口 ###

#### 1、全局配置 ####

配置实例如下：

@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);
        }
    }

首先实现了WebMvcConfigurer接口，重写addCorsMappings()方法，是专门为开发人员解决跨域问题而诞生的接口。其中构造参数为CorsRegistry。

看一下CorsRegistry源码：

public class CorsRegistry {
        
    
       private final List<CorsRegistration> registrations = new ArrayList<>();
    
       public CorsRegistration addMapping(String pathPattern) {
        
          CorsRegistration registration = new CorsRegistration(pathPattern);
          this.registrations.add(registration);
          return registration;
       }
       
       protected Map<String, CorsConfiguration> getCorsConfigurations() {
        
          Map<String, CorsConfiguration> configs = new LinkedHashMap<>(this.registrations.size());
          for (CorsRegistration registration : this.registrations) {
        
             configs.put(registration.getPathPattern(), registration.getCorsConfiguration());
          }
          return configs;
       }
    
    }

可以看出CorsRegistry 有个属性registrations ，按道理可以根据不同的项目路径进行定制访问行为，但是我们示例直接将pathPattern 设置为 /\*\*，也就是说已覆盖项目所有路径，只需要创建一个CorsRegistration就好。

getCorsConfigurations(),这个方法是获取所有CorsConfiguration的Map集合，key值为传入路径pathPattern。

回到示例代码CorsConfig中，registry对象addMapping()增加完传入路径pathPattern之后，return了一个CorsRegistration对象，是进行更多的配置，看一下CorsRegistration的代码，看看我们能配些什么？

public class CorsRegistration {
        
        //传入的路径
       private final String pathPattern;
        //配置信息实体类
       private final CorsConfiguration config;
        //构造方法
       public CorsRegistration(String pathPattern) {
        
          this.pathPattern = pathPattern;
          //原生注释看到了一个 @CrossOrigin 这个注解，待会看看是什么
          // Same implicit default values as the @CrossOrigin annotation + allows simple methods
          this.config = new CorsConfiguration().applyPermitDefaultValues();
       }
        //允许哪些源网站访问，默认所有
       public CorsRegistration allowedOrigins(String... origins) {
        
          this.config.setAllowedOrigins(Arrays.asList(origins));
          return this;
       }
        //允许何种方式访问，默认简单方式，即：GET，HEAD，POST
       public CorsRegistration allowedMethods(String... methods) {
        
          this.config.setAllowedMethods(Arrays.asList(methods));
          return this;
       }
        //设置访问header，默认所有
       public CorsRegistration allowedHeaders(String... headers) {
        
          this.config.setAllowedHeaders(Arrays.asList(headers));
          return this;
       }
        //设置response headers，默认没有（什么都不设置）
       public CorsRegistration exposedHeaders(String... headers) {
        
          this.config.setExposedHeaders(Arrays.asList(headers));
          return this;
       }
        //是否浏览器应该发送credentials，例如cookies Access-Control-Allow-Credentials
       public CorsRegistration allowCredentials(boolean allowCredentials) {
        
          this.config.setAllowCredentials(allowCredentials);
          return this;
       }
        //设置等待时间，默认1800秒
       public CorsRegistration maxAge(long maxAge) {
        
          this.config.setMaxAge(maxAge);
          return this;
       }
    
       protected String getPathPattern() {
        
          return this.pathPattern;
       }
    
       protected CorsConfiguration getCorsConfiguration() {
        
          return this.config;
       }
    
    }

#### 2、局部配置 ####

@CrossOrigin注解实现局部配置，如果只是想部分接口跨域，且不想使用配置来管理的话，可以使用这种方式  
**在具体接口上使用**

@CrossOrigin
    @RestController
    @RequestMapping("/user")
    public class UserController {
        
    
    	@GetMapping("/{id}")
    	public User get(@PathVariable Long id) {
        
    		
    	}
    
    	@DeleteMapping("/{id}")
    	public void remove(@PathVariable Long id) {
        
    
    	}
    }

**具体源码：**

@Target({
         ElementType.METHOD, ElementType.TYPE })
    @Retention(RetentionPolicy.RUNTIME)
    @Documented
    public @interface CrossOrigin {
        
    
       /** @deprecated as of Spring 5.0, in favor of {@link CorsConfiguration#applyPermitDefaultValues} */
       @Deprecated
       String[] DEFAULT_ORIGINS = {
         "*" };
    
       /** @deprecated as of Spring 5.0, in favor of {@link CorsConfiguration#applyPermitDefaultValues} */
       @Deprecated
       String[] DEFAULT_ALLOWED_HEADERS = {
         "*" };
    
       /** @deprecated as of Spring 5.0, in favor of {@link CorsConfiguration#applyPermitDefaultValues} */
       @Deprecated
       boolean DEFAULT_ALLOW_CREDENTIALS = false;
    
       /** @deprecated as of Spring 5.0, in favor of {@link CorsConfiguration#applyPermitDefaultValues} */
       @Deprecated
       long DEFAULT_MAX_AGE = 1800
    
       /**
        * Alias for {@link #origins}.
        */
       @AliasFor("origins")
       String[] value() default {
        };
    
       @AliasFor("value")
       String[] origins() default {
        };
    
       String[] allowedHeaders() default {
        };
    
       String[] exposedHeaders() default {
        };
    
       RequestMethod[] methods() default {
        };
    
       String allowCredentials() default "";
    
       long maxAge() default -1;
    }

这个注解可以作用于方法或者类上，实现局部跨域，你会发现除了设置路径（因为没必要了，都定位到局部了）其他的参数与全局类似。

### 使用Nginx配置 ###

location / {
        
       add_header Access-Control-Allow-Origin *;
       add_header Access-Control-Allow-Headers X-Requested-With;
       add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
    
       if ($request_method = 'OPTIONS') {
        
         return 204;
       }
    }
    复制代码

## 小结 ##

SpringBoot可以基于Cors解决跨域问题，可以设置全局跨域，也可以实现局部跨域，灵活配置方便使用。还可以通过再Nginx的配置文件中添加跨域的配置。