vue+springboot怎么跨域访问

解决Vue和Spring Boot项目之间跨域访问问题
为了有效解决Vue前端应用与Spring Boot后端服务之间的跨域请求问题，可以采用多种方法来配置跨域支持。
方法一：通过@CrossOrigin注解实现简单跨域设置
在控制器层面上使用@CrossOrigin注解是一种简便的方法。此注解可以直接应用于整个控制器类或特定的HTTP处理函数上，从而允许来自指定源的请求[^1]。
@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "http://localhost:8080", maxAge = 3600)
public class MyController {
// 控制器逻辑...
}

这种方法适用于小型应用程序，在开发阶段非常有用；但对于生产环境下的复杂需求，则可能不够灵活。
方法二：全局配置CORS过滤器
对于更复杂的场景，推荐创建一个专门用于管理跨域资源共享（CORS）策略的配置文件。这可以通过继承WebMvcConfigurer接口并重写其addCorsMappings()方法来完成：
@Configuration
public class CrossConfig implements WebMvcConfigurer {

@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*") // 允许所有来源
.allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS") // 支持的方法列表
.maxAge(3600) // 预检请求的有效期为一个小时
.allowedHeaders("*"); // 所有头部都可接受
}
}

这种方式提供了更高的灵活性，并且能够更好地适应不同类型的客户端连接[^2]。
前端Axios默认配置调整
除了服务器端的变化外，还可以考虑修改前端项目的axios实例，默认情况下自动附带凭证信息（如Cookies），这对于某些安全敏感的应用可能是必要的。如果不需要携带认证信息的话，可以在初始化时关闭它：
import axios from 'axios';

const instance = axios.create({
baseURL: process.env.VUE_APP_API_URL,
withCredentials: false, // 不随同请求一起发送cookie
});

export default instance;

这样做有助于减少不必要的麻烦，特别是在测试环境中。