配置一次，畅行无阻！彻底搞定Spring Boot跨域问题

后端

2023-04-04 11:04:01

跨域：打破浏览器的限制

在现代网络世界中，网站和应用程序经常需要与其他域中的资源交互，例如图像、视频或数据。然而，浏览器出于安全考虑，实施了同源策略，限制了跨域请求。跨域请求就是指从一个源（域）发出的请求，试图访问另一个源（域）的资源。

理解同源策略

同源策略是一个安全机制，旨在防止恶意网站窃取用户数据。它基于三个组件：

协议：请求的协议（例如 HTTP 或 HTTPS）必须相同。
主机名 ：请求的主机名（例如 example.com）必须相同。
端口：请求的端口号（例如 80 或 443）必须相同。

如果这三个组件不匹配，浏览器就会阻止请求，显示错误或安全警告。

解决跨域：SpringBoot 的解决方案

SpringBoot 提供了多种解决方案，以应对跨域问题，使您能够跨源安全地访问资源：

1. @CrossOrigin 注解

@CrossOrigin 注解是一种简单易用的方式，可以启用跨域访问。它可以应用于控制器类或方法，指定允许的源。例如：

@RequestMapping("/api/users")
@CrossOrigin(origins = "http://localhost:8080")
public class UserController {
    // ... 代码
}

这将允许来自 http://localhost:8080 域的跨域请求。

2. CorsFilter

CorsFilter 是一种灵活的过滤器，允许您在 Web 应用程序中添加跨域支持。它可以根据您的具体需求进行配置：

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

此配置允许所有源进行跨域访问。

3. WebMvcConfigurer

WebMvcConfigurer 允许您配置各种 MVC 相关功能，包括跨域支持：

public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("*")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

这类似于 CorsFilter，但允许更细粒度的配置。

4. Spring Cloud Gateway

Spring Cloud Gateway 是一款 API 网关，提供高级跨域支持：

spring:
  cloud:
    gateway:
      routes:
        - id: user-service
          uri: http://localhost:8081
          predicates:
            - Path=/api/users/**
          filters:
            - AddResponseHeader=Access-Control-Allow-Origin, *

此配置允许来自任何源对 /api/users/** 端点的跨域访问。

5. Nginx 反向代理

Nginx 是一个流行的反向代理服务器，可用于配置跨域支持：

server {
    listen 80;
    server_name example.com;

    location / {
        proxy_pass http://localhost:8080;
        add_header Access-Control-Allow-Origin *;
    }
}

此配置在 Nginx 服务器上启用跨域访问。

常见问题解答