如何解决AJAX访问SpringBoot2.0时的跨域问题

在现代Web开发中，前后端分离的架构越来越流行。前端通常使用AJAX技术与后端进行数据交互，而后端则使用Spring Boot等框架提供服务。然而，由于浏览器的同源策略（Same-Origin Policy），AJAX请求在不同域名、端口或协议之间进行时，往往会遇到跨域问题。本文将详细介绍如何在Spring Boot 2.0中解决AJAX访问时的跨域问题。

1. 什么是跨域问题？

跨域问题是由于浏览器的同源策略引起的。同源策略是浏览器的一种安全机制，它要求AJAX请求的源（协议、域名、端口）必须与目标资源的源相同。如果源不同，浏览器会阻止AJAX请求的响应，从而导致跨域问题。

例如，假设前端应用运行在http://localhost:8080，而后端服务运行在http://localhost:8081，由于端口不同，浏览器会认为这是跨域请求，从而阻止AJAX请求的响应。

2. 跨域问题的解决方案

解决跨域问题有多种方法，常见的包括：

1. CORS（跨域资源共享）：CORS是一种W3C标准，允许服务器声明哪些源可以访问其资源。通过配置CORS，服务器可以告诉浏览器允许哪些跨域请求。

2. JSONP：JSONP是一种利用<script>标签不受同源策略限制的特性来实现跨域请求的方法。然而，JSONP只支持GET请求，且安全性较低，因此不推荐使用。

3. 代理服务器：通过在前端和后端之间设置一个代理服务器，前端请求代理服务器，代理服务器再请求后端服务。由于代理服务器与前端同源，因此可以避免跨域问题。

本文将重点介绍如何在Spring Boot 2.0中使用CORS解决跨域问题。

3. 在Spring Boot 2.0中配置CORS

Spring Boot 2.0提供了多种方式来配置CORS，下面我们将介绍几种常见的方法。

3.1 使用@CrossOrigin注解

@CrossOrigin注解是Spring Boot中最简单的CORS配置方式。通过在Controller类或方法上添加@CrossOrigin注解，可以允许特定的跨域请求。

3.1.1 在Controller类上使用@CrossOrigin注解

@RestController
@CrossOrigin(origins = "http://localhost:8080")
public class MyController {

    @GetMapping("/hello")
    public String hello() {
        return "Hello, World!";
    }
}

在上面的代码中，@CrossOrigin(origins = "http://localhost:8080")表示允许来自http://localhost:8080的跨域请求。

3.1.2 在方法上使用@CrossOrigin注解

@RestController
public class MyController {

    @GetMapping("/hello")
    @CrossOrigin(origins = "http://localhost:8080")
    public String hello() {
        return "Hello, World!";
    }
}

在这个例子中，@CrossOrigin注解只应用于hello()方法，因此只有/hello路径允许来自http://localhost:8080的跨域请求。

3.2 全局CORS配置

如果需要在多个Controller中共享CORS配置，可以使用全局CORS配置。Spring Boot 2.0提供了WebMvcConfigurer接口，可以通过实现该接口来配置全局CORS。

3.2.1 实现WebMvcConfigurer接口

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8080")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

在上面的代码中，addCorsMappings()方法配置了全局CORS规则：

• addMapping("/**")：表示对所有路径应用CORS规则。
• allowedOrigins("http://localhost:8080")：表示允许来自http://localhost:8080的跨域请求。
• allowedMethods("GET", "POST", "PUT", "DELETE")：表示允许的HTTP方法。
• allowedHeaders("*")：表示允许所有请求头。
• allowCredentials(true)：表示允许携带凭证（如Cookies）。
• maxAge(3600)：表示预检请求的缓存时间（单位：秒）。

3.2.2 使用CorsConfigurationSource Bean

除了实现WebMvcConfigurer接口，还可以通过定义CorsConfigurationSource Bean来配置全局CORS。

@Configuration
public class WebConfig {

    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(Arrays.asList("http://localhost:8080"));
        configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE"));
        configuration.setAllowedHeaders(Arrays.asList("*"));
        configuration.setAllowCredentials(true);
        configuration.setMaxAge(3600L);

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }
}

在这个例子中，CorsConfigurationSource Bean定义了全局CORS规则，与前面的WebMvcConfigurer实现类似。

3.3 使用Spring Security配置CORS

如果你的Spring Boot应用使用了Spring Security，那么还需要在Spring Security中配置CORS。Spring Security默认会覆盖Spring MVC的CORS配置，因此需要显式地启用CORS支持。

3.3.1 在Spring Security中启用CORS

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and().csrf().disable()
            .authorizeRequests()
            .anyRequest().authenticated();
    }

    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(Arrays.asList("http://localhost:8080"));
        configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE"));
        configuration.setAllowedHeaders(Arrays.asList("*"));
        configuration.setAllowCredentials(true);
        configuration.setMaxAge(3600L);

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }
}

在这个例子中，http.cors()启用了Spring Security的CORS支持，并且通过corsConfigurationSource() Bean配置了CORS规则。

4. 测试CORS配置

在完成CORS配置后，可以通过以下步骤测试CORS是否生效：

1. 启动Spring Boot应用。
2. 在前端应用中发起AJAX请求，目标URL为Spring Boot应用的API地址。
3. 检查浏览器控制台，确保没有跨域错误。

如果CORS配置正确，浏览器将允许跨域请求，并且AJAX请求的响应将被正确处理。

5. 总结

跨域问题是前后端分离架构中常见的挑战之一。通过合理配置CORS，可以有效地解决AJAX访问Spring Boot 2.0时的跨域问题。本文介绍了在Spring Boot 2.0中使用@CrossOrigin注解、全局CORS配置以及Spring Security中的CORS配置方法。希望这些方法能够帮助你在实际项目中顺利解决跨域问题。