跨域问题解决之隔山隔海都不怕

一、背景

在现代Web开发中，前后端分离架构越来越流行。在这种架构下，前端和后端分别运行在不同的域名下，这就涉及到了跨域请求的问题。当使用Spring Boot作为后端服务框架时，默认情况下是不允许跨域请求的，这会导致前端在发送请求时遇到跨域错误，从而影响用户体验和数据的正常交互。

二、跨域问题的产生

跨域问题源于浏览器的同源策略。同源策略是一种安全机制，它要求Web页面只能与相同来源的服务器进行通信。这里的“同源”指的是协议、域名和端口都相同。如果前端和后端不在同一域名下，就会产生跨域问题。

三、解决方案

为了解决跨域问题，我们可以在Spring Boot应用中配置CORS（Cross-Origin Resource Sharing）策略来允许跨域请求。

1. 全局CORS配置

   通过配置CorsRegistry，我们可以为所有控制器添加CORS支持。

   @Configuration
   public class CorsConfig {
   
       @Bean
       public WebMvcConfigurer corsConfigurer() {
           return new WebMvcConfigurer() {
               @Override
               public void addCorsMappings(CorsRegistry registry) {
                   registry.addMapping("/**")
                           .allowedOrigins("*")
                           .allowedMethods("GET", "POST", "PUT", "DELETE")
                           .allowedHeaders("*")
                           .exposedHeaders("Authorization");
               }
           };
       }
   }
   

2. 控制器级别的CORS配置

   如果只需要对特定的控制器或路径开放跨域请求，可以在对应的控制器上添加CrossOrigin注解。

   @RestController
   public class MyController {
   
       @CrossOrigin(origins = "http://example.com")
       @GetMapping("/my-endpoint")
       public ResponseEntity<String> myEndpoint() {
           return ResponseEntity.ok("Hello, world!");
       }
   }
   

3. 自定义CORS配置

   如果你有更复杂的需求，可以通过实现WebMvcConfigurer接口并重写addCorsMappings方法来进行更细粒度的控制。

   @Configuration
   public class CustomCorsConfig implements WebMvcConfigurer {
       @Override
       public void addCorsMappings(CorsRegistry registry) {
           registry.addMapping("/**")
                   .allowedOrigins("http://localhost:8080")
                   .allowedMethods("GET", "POST")
                   .allowCredentials(true)
                   .maxAge(3600);
       }
   }
   

四、示例代码

假设我们有一个Spring Boot应用，我们想要允许来自http://localhost:4200的前端应用发起跨域请求。我们可以按照以下步骤进行配置：

1. 添加依赖

   在pom.xml文件中添加Spring Boot的Web依赖。

   <dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-web</artifactId>
   </dependency>
   

2. 创建配置类

   创建一个配置类来实现跨域配置。

   package com.example.config;
   
   import org.springframework.context.annotation.Configuration;
   import org.springframework.web.servlet.config.annotation.CorsRegistry;
   import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
   
   @Configuration
   public class WebConfig implements WebMvcConfigurer {
       @Override
       public void addCorsMappings(CorsRegistry registry) {
           registry.addMapping("/**")
                   .allowedOrigins("http://localhost:4200")
                   .allowedMethods("GET", "POST", "PUT", "DELETE")
                   .allowedHeaders("*")
                   .exposedHeaders("Authorization");
       }
   }
   

3. 测试

   启动Spring Boot应用，然后从前端应用http://localhost:4200发起跨域请求，应该能够正常访问后端服务。

五、总结

通过配置CORS策略，我们可以有效地解决Spring Boot应用中的跨域问题，从而使得前后端分离的应用能够正常地进行数据交互。根据实际需求，可以选择全局配置或者针对特定路径的配置方式，灵活地处理跨域请求问题。