SpringBoot解决AJAX跨域请求及自定义Headers方法

在现代Web开发中，跨域请求是一个常见的挑战，尤其是在前后端分离的架构中。本文将深入探讨跨域请求的本质，并提供在 Spring Boot 中处理这些请求的有效方法。

1. 跨域请求的基本概念

跨域请求是指从一个域向另一个域发起的HTTP请求。这种限制源于浏览器的同源策略，这是一种安全措施，用于防止恶意文档或脚本从一个源获取或操作另一个源的资源。同源策略要求请求的协议、域名和端口必须完全一致。

2. Spring Boot 中的跨域解决方案

2.1 基本跨域配置

在 Spring Boot 中，可以通过在控制器方法上添加 @CrossOrigin 注解来轻松启用跨域支持：

@CrossOrigin(origins = "http://example.com", maxAge = 3600)
@RequestMapping(value = "/api", method = RequestMethod.GET)
public ResponseEntity getApi() {
    return new ResponseEntity<>("Hello World", HttpStatus.OK);
}

此外，也可以通过全局配置来启用跨域支持，适用于所有接口：

@Configuration
public class CorsConfig {

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

2.2 处理带有自定义 Headers 的跨域请求

当 AJAX 请求包含自定义 Headers 时，浏览器会首先发送一个 OPTIONS 请求作为预检（Preflight），以确保服务器允许实际请求。如果服务器没有正确处理 OPTIONS 请求，则会导致请求失败。

例如，以下是一个包含自定义 Header 的 AJAX 请求：

$.ajax({
    type: 'GET',
    url: 'http://localhost:8766/main/currency/sginInState',
    dataType: 'JSON',
    data: { uid: userId },
    beforeSend: function (xhr) {
        xhr.setRequestHeader('Authorization', access_token);
    },
    success: function (res) {
        console.log(res.code);
    }
});

为了处理这种请求，可以在 Spring Boot 项目的 application.yml 文件中添加以下配置：

spring:
  mvc:
    dispatch-options-request: true

这将允许 Spring Boot 处理 OPTIONS 请求。然而，这可能不足以解决所有问题，特别是在复杂的环境中。另一种方法是通过自定义过滤器来处理跨域请求：

@Component
public class RequestFilter implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, PATCH, DELETE, OPTIONS");
        response.setHeader("Access-Control-Max-Age", "86400");
        response.setHeader("Access-Control-Allow-Headers", "Authorization");
        if (HttpMethod.OPTIONS.equals(request.getMethod())) {
            response.setStatus(HttpStatus.NO_CONTENT.value());
            return false;
        }
        return true;
    }
}

还需要注册这个过滤器：

@Configuration
public class MyWebConfiguration extends WebMvcConfigurationSupport {

    @Autowired
    private RequestFilter requestFilter;

    @Override
    protected void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(requestFilter).addPathPatterns("/**");
    }
}

通过上述配置，我们可以有效地处理带有自定义 Headers 的跨域请求，确保应用程序的安全性和功能性。

希望本文对你有所帮助，如果你有任何疑问或建议，欢迎留言交流。