前后端分离————跨域问题解决

最新推荐文章于 2024-07-07 11:03:14 发布

原创最新推荐文章于 2024-07-07 11:03:14 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#后端 #springboot #跨域

本文介绍了在Vue前端应用中调用SpringBoot后端接口时遇到的跨域错误。同源策略限制了不同源之间的交互，导致浏览器拦截响应。为了解决这个问题，文章详细讲解了SpringBoot后台如何通过添加@CrossOrigin注解、配置CORS过滤器以及实现WebMvcConfig接口来设置允许跨域。这些方法允许前端成功访问后端接口，克服浏览器的同源策略限制。

跨域

Vue调用SpringBoot后端接口
报错

这个就属于跨域错误

在这里插入图片描述

浏览器报错不能正常显示信息

这种情况属于后端响应结果并且进行返回了，但是浏览器因为保护机制，将这个响应拦截了，所以无法读取进行报错。(原因http少一些头部信息)

因为浏览器同源策略
限制不同源之间的交互，而从有效避免一些浏览器层面的攻击。

同源策略
协议、域名、端口3个都相同就是同源。

Vue ： http://localhost:8080
SpringBoot : http://localhost:8181/list

CORS: cross Origin Resource Sharing 跨域资源共享

由一系列http头组成，它就会决定浏览器是否阻止前端代码读取当前跨域请求访问过来的这个响应。

后端解决跨域问题方法

SpringBoot项目中解决跨域

1.在目标方法上添加@CrossOrigin注解

2.添加CORS过滤器

@Configuraation
Public  class   CorsConfig{


	@Bean
	Public CorsFilter corsFilter（）{
			CrosConfiguration 	crosConfiguration = new 	CrosConfiguration();
			//  允许可以访问的域名信息
			crosConfiguration.addAllowedOrign(“*”);
			//  允许访问的头字段
			crosConfiguration.addAllowedHeader (“*”)；
			//   允许的请求方式
			crosConfiguration.addAllowedMethod (“*”)

 			UrlBasedCorsConfigurationSource  source =new   							UrlBasedCorsConfigurationSource();
			
			source.registerCorsConfiguration("/**", crosConfiguration);

			Return new CorsFilter(source);

}

}