解决Vue调用springboot接口403跨域问题

本文主要介绍了在Vue前端与SpringBoot后端进行整合时遇到的403跨域请求问题。首先强调了问题定位在后端,然后提供两种简单的解决方法:1) 在Controller层使用`@CrossOrigin`注解;2) 配置全局跨域的Config类。这些方法适用于JDK1.8及SpringMVC 4.2以上版本。

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

最近在做一个前后端分离的项目, 前端用的是Vue后端使用的是springboot, 在项目整合的时候发现前端调用后端接口报错403跨域请求问题

前端跨域请求已解决, 那么问题就出在后端了, 找了一些资料找到了很多种方法, 这里说两个简单粗暴的.

注意:“@CrossOrigin“注解要求jdk1.8及以上版本, SpringMVC 4.2及以上版本

1. 在controller层上添加@Configuration注解, 如果没有效果请制定RequestMapping总的method类型在试一下.(此注解也可以加在方法上)

@RestController
public
class Demo { @Configuration @RequestMapping("test) public String test() { // 这里是代码 } }
@Configuration
@RestController
### 解决Vue.js与Spring Boot项目中的CORS问题 #### 后端解决方案:使用`@CrossOrigin`注解 在构建RESTful服务时,在控制器类或方法级别应用`@CrossOrigin`注解可以轻松启用请求支持。通过指定允许访问资源的具体名,能够有效控制哪些客户端有权发起HTTP请求。 ```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("这是成功的响应"); } } ``` 此代码片段展示了如何利用`@CrossOrigin`来设置特定路径下的策略[^2]。 #### 配置全局CORS过滤器 除了局部化的方式外,还可以在整个应用程序层面定义统一的CORS政策。这通常涉及到创建自定义Filter组件并注册至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); } } ``` 这种方法适用于更广泛的场景,并提供了更大的灵活性去调整不同类型的HTTP动词以及预检请求的有效期等参数[^1]。 #### 前端解决方案:配置代理服务器 对于开发环境而言,另一种常见做法是在vue.config.js文件里添加devServer.proxy属性,从而让所有的API调用都经过本地NodeJS实例转发给实际的服务地址,这样浏览器就不会认为存在站行为了。 ```javascript module.exports = { devServer: { proxy: 'http://localhost:8081' } }; ``` 上述配置使得任何发送到`/api/*`模式匹配的目标都会被重定向到目标主机上的相应位置,而不会触发同源策略限制。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值