首页　>　文章列表　>　Spring Boot实现和解决跨域问题的技巧

Spring Boot实现和解决跨域问题的技巧

技巧 springboot 跨域问题
197 2023-06-28

随着前后端分离的普及，前端与后端之间的跨域问题也逐渐成为Web开发人员面临的一个问题。跨域问题涉及到浏览器的同源策略，即在默认情况下，浏览器只允许页面向同源服务器发起请求，而不能向其他域名的服务器发起请求。本文将介绍如何使用Spring Boot框架实现和解决跨域问题。

什么是跨域问题？

跨域问题是指在浏览器中，当一个Web应用在A域名下运行，向B域名下的Web应用程序发送请求时，浏览器会阻止此请求，因为这不符合浏览器同源策略的规定。同源策略指的是只有在相同协议、域名、端口号相同的情况下，浏览器才允许页面向服务器发起请求。

Spring Boot支持的解决跨域方法

Spring Boot提供了多种解决跨域问题的方法，下面介绍几种比较常用的方法。

2.1 使用注解@CrossOrigin

在Spring Boot中，可以使用注解@CrossOrigin来实现跨域请求。@CrossOrigin注解可用于类或方法级别，并且可以指定CORS的一些选项，例如允许跨域访问的域名、允许的请求方式等。下面是一个使用@CrossOrigin注解的示例代码：

@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "http://localhost:8080", maxAge = 3600)
public class ApiController {

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

以上代码中，使用了@CrossOrigin注解并指定了跨域域名为http://localhost:8080，同时设置了最长缓存时间为1小时。这样，在前端Ajax请求时，就可以跨域访问http://localhost:8080了。需要注意的是，@CrossOrigin注解应该添加在控制器类上或方法上，而不是加到@RequestBody参数上。

2.2 配置WebMvcConfigurer

另一种解决跨域问题的方法是通过实现WebMvcConfigurer接口，并覆盖addCorsMappings方法，使用CorsRegistry配置允许跨域访问的域名。下面是示例代码：

@Configuration
public class CorsConfig implements WebMvcConfigurer {

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

以上代码中，CorsConfig类实现了WebMvcConfigurer接口，并覆盖了addCorsMappings方法，只允许http://localhost:8080域名下的GET、POST请求访问。包含"/api"的路径都会受到CORS的限制，而其他路径将不受任何限制。

2.3 配置Filter

使用过滤器也是一种解决跨域问题的方法。下面是一个使用过滤器的示例：

@Component
public class CorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
            throws ServletException, IOException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
        response.setHeader("Access-Control-Allow-Methods", "GET, POST");
        response.setHeader("Access-Control-Max-Age", "3600");
        chain.doFilter(req, res);
    }
}

以上代码中，CorsFilter类实现了Filter接口，并添加了Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Max-Age等请求头信息，允许http://localhost:8080域名下的GET、POST请求访问。