SpringBoot项目解决跨域的几种方式

跨域报错信息如下：

Access to XMLHttpRequest at 'http://localhost:8181/list' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

同源策略

协议、域名、端口 3 个都相同就是同源

Vue(前端)：http://localhost:8080

Spring Boot（后端）：http://localhost:8181/list

CORS：Cross Origin Resource Sharing

Spring Boot 项目中解决跨域的几种方案：

1、CORS（Cross-Origin Resource Sharing）：

• 使用 @CrossOrigin 注解或全局配置来启用 CORS，允许指定的域名进行跨域访问。

1.1、在目标方法上或者类上添加 @CrossOrigin 注解

@GetMapping("/list")
@CrossOrigin(origins = "http://example.com")
public List list(){
    List list = Arrays.asList("Java","C++","Go");
    return list;
}

1.2、全局配置跨域（实现 WebMvcConfigurer 接口，重写 addCorsMappings 方法）

@Configuration //配置类
@Slf4j //日志记录器（Logger）
public class WebMvcConfig implements WebMvcConfigurer {


    /**
     * 全局配置跨域，启用CORS
     * 允许跨域请求的配置，包括允许的来源、允许的请求头、允许的请求方法等
     * allowCredentials(false) 表示是否允许发送 Cookie 等认证信息。
     * allowedOrigins("*") 允许的来源域名，这里设置为通配符表示允许所有来源。
     * allowedHeaders("*") 允许的请求头。
     * allowedMethods("GET", "PUT", "POST", "DELETE") 允许的请求方法。
     * exposedHeaders("*") 暴露给前端的响应头。
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowCredentials(false)
                .allowedOrigins("*")
                .allowedHeaders("*")
                .allowedMethods("GET", "PUT", "POST", "DELETE")
                .exposedHeaders("*");
    }
}

2、代理服务器：

在后端创建一个代理接口，将跨域请求转发到目标服务器，再将响应返回给前端。这种方式需要自行维护代理服务器。

3、JSONP：

如果只是需要实现 GET 请求的跨域，可以使用 JSONP，但不适用于所有类型的请求。
自定义过滤器：

4、创建一个自定义过滤器

在请求处理前或响应返回前，修改请求或响应的头部信息，从而允许跨域访问。

5、Spring Security 配置：
如果项目中使用了 Spring Security，你可以在配置中添加跨域相关的配置，以支持跨域访问。