spring boot与vue3的跨域资源共享问题

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

在使用vue前端直接访问localhost:8080端口的时候，由于vue的端口为5173，浏览器默认拦截了这种跨端口的请求，需要后端配置允许前端 origin 的访问权限才能解决。

浏览器的 “同源策略” 要求请求的协议、域名、端口必须完全一致，否则会被拦截。当前前端（5173 端口）请求后端（8080 端口），属于 “不同端口”，因此触发 CORS 拦截，且后端未返回允许跨域的 Access-Control-Allow-Origin 响应头。

在后端项目中添加 CORS 配置类，允许指定前端地址访问：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        // 1. 配置CORS信息
        CorsConfiguration config = new CorsConfiguration();
        // 允许前端的origin（开发环境：localhost:5173；生产环境需替换为实际域名）
        config.addAllowedOrigin("http://localhost:5173");
        // 允许前端携带Cookie（若需要）
        config.setAllowCredentials(true);
        // 允许所有请求方法（GET/POST等）
        config.addAllowedMethod("*");
        // 允许所有请求头
        config.addAllowedHeader("*");

        // 2. 配置拦截所有路径
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);

        // 3. 返回CORS过滤器
        return new CorsFilter(source);
    }
}