现在除了一些比较老的项目基本都采用的是,前后端分离方式进行开发,但随之而来的就会出现跨域问题。
跨域问题出现的根本原因就是由于浏览器的同源策略。
Spring Boot
前端错误信息:
Access to XMLHttpRequest at 'http://localhost:8181/list' from origin
'http://localhost:8080' has been blocked by CROS poilcy: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
这其实是浏览器的一种保护机制,而不是说后端没有接收到请求。但是因为前端浏览器的一些设置,导致报错,响应被拦截了。
同源策略:浏览器的一种安全策略,限制不同源之类的交互。不同源之间的请求无法交互,从而有效避免一些浏览器层面的攻击。 协议,域名,端口
三个都相同就算是同源,就不会产生跨域问题
举个例子(以下的就不是同源,需要跨域):
Vue : http://localhost:8080
Spring Boot: http://localhost:8081/list
下面介绍三种在后端解决跨域的方法:
1.在请求上加上@CrossOrigin即可
@PostMapping("wx/auth/logout")
@CrossOrigin
public BaseRespVo logout() {
Subject subject = SecurityUtils.getSubject();
subject.logout();
return BaseRespVo.ok();
}
2.做CorsConfig配置类
@Configuration
public class CorsConfig {
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
// 对接口配置跨域设置
source.registerCorsConfiguration("/**", buildConfig());
return new CorsFilter(source);
}
}
3.添加cos的一个映射
@Configuration
public class CorsConfiguration implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOriginPatterns("*")
.allowedMethods("POST", "GET", "PUT", "DELETE", "HEAD", "OPTIONS")
.maxAge(3600)
.allowedHeaders("*")
.allowCredentials(true);
}
}
当然了,这只是后端解决的方式,前端也可以,通过Nginx代理解决跨域问题也是可以的,想知道的小伙伴在评论区,下期出。