Vue3+Spring Boot3实现跨域通信解决办法

在Vue 3和Spring Boot 3中实现跨域通信，可以在Spring Boot端配置CORS。

Spring Boot 3中配置CORS的示例代码：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
 
@Configuration
public class CorsConfig {
 
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**") // 允许跨域的路径
                        .allowedOrigins("http://localhost:8080") // Vue应用的域名
                        .allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的请求方法
                        .allowedHeaders("*") // 允许的请求头
                        .allowCredentials(true); // 是否允许证书（cookies）
            }
        };
    }
}

确保将allowedOrigins设置为Vue应用所在的域名或使用通配符"*"以允许所有源。

在Vue 3中，如果你使用axios进行HTTP请求，可以这样配置：

import axios from 'axios';
 
const apiClient = axios.create({
  baseURL: 'http://localhost:8080/api', // Spring Boot应用的URL
  withCredentials: true, // 如果CORS需要认证信息，则设置为true
});
 
export default apiClient;

确保baseURL正确指向Spring Boot应用的URL。如果CORS策略设置了需要认证信息（如cookies），则在axios配置中将withCredentials设置为true。