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

一、背景

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

二、跨域问题的产生

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

三、解决方案

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

全局CORS配置

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

java 复制代码

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

控制器级别的CORS配置

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

java 复制代码

@RestController
public class MyController {

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

自定义CORS配置

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

java 复制代码

@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的前端应用发起跨域请求。我们可以按照以下步骤进行配置：

添加依赖

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

xml 复制代码

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

创建配置类

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

java 复制代码

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

测试

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

五、总结

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