如何解决SpringBoot Vue3中的浏览器CORS问题？

摸个底。 在前后端分离的Web开发中，跨域资源共享问题是一个常见且令人困惑的挑战。尤其当使用Spring Boot作为后端框架，Vue.js作为前端框架时解决跨域问题至关重要。本文将深入探讨各种解决方案， 包括配置Spring Boot的CORS策略、使用过滤器、以及前端的代理配置等。

什么是CORS？

CORS是一种浏览器平安机制，用于控制哪些域可以访问其他域的资源。默认情况下浏览器会阻止来自不同域的请求，以防止恶意行为。但在前后端分离的项目中，前端通常运行在不同的域名下需要绕过CORS限制才能进行跨域通信，来日方长。。

常见的跨域场景

• 同源协议、域名和端口都相同
• 不同源至少有一个不同

解决方法

方案一：Spring Boot @CrossOrigin 注解

这是最简单直接的方法。可以在Spring Boot Controller方法上添加@CrossOrigin注解来配置允许跨域的源。

import org.springframework.web.bind.annotation.*;
@RestController
@RequestMapping // 添加请求映射路径/api用于区分API接口路径即可实现更精细的权限控制或路由逻辑调整；若不指定路径，则默认根路径即可。  // 使用了requestmapping来定义controller类的访问路径；此处为`/api`。