VUE+Springboot项目解决请求跨域问题No 'Access-Control-Allow-Origin' header is present on the requested resource

项目采用的是springboot+vue结构,springboot负责写接口后台,vue负责前端显示 但是在请求接口的时候在浏览器上是没有错的,能返回数据,但是vue却报错No ‘Access-Control-Allow-Origin’ header is present on the requested resource

这个就是请求跨域的问题,解决的办法有两种

第一个办法:

在springboot后台处理,在controller控制类上标注@CrossOrigin
在这里插入图片描述

第二个办法:

在VUE模块中解决
、项目根目录中找到config/index.js文件,找到 proxyTable 添加如下配置

	     '/api': {                                   //要代理的接口名
	        target: 'http://localhost:8080',		//要代理的接口地址
	        changeOrigin: true,  					//支持跨域
	        pathRewrite: {						   //重写接口名,这里就是可以简写成‘api’
	          '^/api': ''
	        }
	      }

在这里插入图片描述

### 解决OAuth服务请求中的CORS错误 当遇到`No 'Access-Control-Allow-Origin' header is present on the requested resource.`这类错误时,表明浏览器的安全机制——即同源策略(Same-Origin Policy),正在阻止当前页面向另一个源发送请求[^3]。 对于基于Spring Security OAuth2实现的前后端分离应用,在Vue前端通过Axios发起带有凭证(Credentials)的请求(`withCredentials=true`)到后端API时,如果未正确设置CORS响应头,则会触发上述错误。为了使此类请求成功执行,需要满足以下几个条件: - **精确匹配Origin**: 如果前端设置了`withCredentials=true`,那么后端不能简单地将`Access-Control-Allow-Origin`设为通配符`*`,而应该将其设定为目标站点的具体URL。 - **启用凭证支持**: 需要在响应头部加入`Access-Control-Allow-Credentials: true`以允许携带身份验证信息(如Cookies)[^4]。 - **自定义请求头处理**: 若前端请求包含了特定的HTTP头部字段,比如Authorization或其他自定义头部,这些也应在预检请求(PREFLIGHT REQUEST)中被声明,并由服务器端在`Access-Control-Allow-Headers`中予以确认。 针对Java Spring Boot框架下的解决方案可以如下所示配置全局CORS过滤器: ```java @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration config = new CorsConfiguration(); // 设置可信任的客户端名列表 List<String> allowedOrigins = Arrays.asList("http://example.com"); config.setAllowedOrigins(allowedOrigins); // 允许所有的HTTP方法(GET, POST, PUT, DELETE...) config.addAllowedMethod("*"); // 支持带cookie等认证信息的调用 config.setAllowCredentials(true); // 对于预检请求,允许哪些header可以通过 config.setAllowedHeaders(Arrays.asList( "Content-Type", "X-Requested-With", "accept", "origin", "authorization" )); source.registerCorsConfiguration("/api/**", config); // 应用于/api路径下的所有接口 return new CorsFilter(source); } ``` 以上代码片段展示了如何创建并注册一个适用于整个应用程序API接口的CORS过滤器实例。请注意替换`"http://example.com"`为你实际使用的前端地址以及调整其他参数适应具体的业务场景需求。 #### 关键点总结 - 浏览器实施严格的同源政策来保护用户免受潜在攻击; - 资源共享(CORS)提供了一种安全的方式让不同源之间互相通信; - 在涉及敏感操作(如登录状态保持)的情况下,必须显式指明可信的来源并且开启凭证共享选项; - 后端应当根据实际情况灵活调整CORS策略,既保障安全性又不影响正常功能使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值