vue+springboot跨域

### 配置 Vue 和 Spring Boot 解决 CORS 跨域请求 #### 局部跨域解决方案 为了处理特定控制器或方法级别的跨域问题，在 `Spring Boot` 的控制器类或其方法上可以使用 `@CrossOrigin` 注解。这使得能够精确控制哪些 URL 可以访问该资源。 对于 `DataController` 类，通过如下方式定义： ```java import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; @RestController public class DataController { @CrossOrigin(origins = "http://localhost:8080") @GetMapping("/data") public Message getData() { return new Message("这是跨域成功的响应"); } } ``` 此代码片段展示了如何针对 `/data` 接口启用来自 `http://localhost:8080` 地址的跨域请求[^1]。 同样地，另一个例子是在 `MyController` 中应用相同的技术来允许来自不同源 (`http://localhost:3000`) 的请求: ```java import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; @RestController public class MyController { @CrossOrigin(origins = "http://localhost:3000") @GetMapping("/example") public String example() { return "Example Response"; } } ``` 这种方式适合于只需要为某些 API 提供跨域支持的情况[^2]。 #### 全局跨域配置方案 如果希望在整个应用程序范围内统一管理跨域策略，则可以通过实现 `WebMvcConfigurer` 接口并覆盖相应的方法来进行全局配置。这种方法更加灵活且易于维护。 下面是一个简单的示例说明如何设置全局跨域规则： ```java @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") // 或者指定具体的URL列表 .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .maxAge(3600); } } ``` 这段代码实现了对所有路径开放 CORS 支持的功能，并指定了允许的操作类型以及缓存的最大时间长度[^3]。 #### 前端 Vue 开发服务器代理配置 除了服务端调整外，开发阶段还可以利用前端框架提供的工具简化跨域调用过程。例如，在基于 Vue CLI 构建的应用程序中，可通过修改 `vue.config.js` 文件中的 `devServer.proxy` 字段创建 HTTP 代理，从而绕过浏览器的安全机制。 以下是配置样例： ```javascript module.exports = { devServer: { port: 8080, proxy: { '/api': { target: 'http://localhost:9090', changeOrigin: true, pathRewrite: {'^/api' : ''} } } } }; ``` 这里设置了当请求匹配到 `/api` 前缀时会被转发给运行在 `http://localhost:9090` 上的服务实例，同时移除原始 URI 中的前缀部分以便正确路由至后台API接口[^4]。