SpringBoot Vue 前后端分离 跨域访问

本文介绍了跨域的两种主要配置方式,分别从前端和后端的角度进行解析。在后端接口层,通过使用@CrossOrigin注解实现跨域访问,为开发者提供了一种简单有效的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

跨域方式有两种配置,一种是前端,一种是后端配置

在接口层加入 : @CrossOrigin 注解。

 

### Spring Boot 和 Vue.js 组成的前后端分离项目中的配置 为了实现Spring Boot和Vue.js之间有效的通信,解决浏览器同源策略带来的限制,在Spring Boot应用程序中需要正确配置CORS(Cross-Origin Resource Sharing)。下面提供一种基于Java代码配置的方式来启用全局CORS支持。 #### 配置CORS过滤器 可以在`WebConfig.java`文件内定义一个实现了`WebMvcConfigurer`接口的类,并重写其中的`addCorsMappings()`方法: ```java @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { // 设置允许访问的基础URL模式 registry.addMapping("/**") // 允许所有来源名发起请求 .allowedOriginPatterns("*") // 支持凭证发送(如Cookie) .allowCredentials(true) // 明确指定允许的具体HTTP方法 .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 对于预检请求缓存的有效期为1小时 .maxAge(3600); } } ``` 上述配置使得整个API都开放给了任何外部站点调用[^5]。需要注意的是,当启用了`.allowCredentials(true)`选项时,则不允许通配符(`*`)作为合法原点列表的一部分;此时应该具体指明哪些网站被授权能够携带认证信息进行站请求。 对于生产环境而言,建议仅限特定可信客户端地址而非全部(*), 这样可以提高安全性并减少潜在风险。 此外,如果只是针对某些特定控制器或接口开启CORS功能的话,也可以直接在对应的方法上面添加注解形式完成局部范围内的资源共享声明: ```java @CrossOrigin(origins = {"http://example.com"}, maxAge = 3600, methods={RequestMethod.GET}) @GetMapping("/api/data") public ResponseEntity<?> getData() {} ``` 以上就是关于如何在一个采用Spring Boot与Vue.js构建的应用程序里实施解决方案的一些指导说明。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值