1. 为什么会出现跨域问题?
因为浏览器有同源策略,就是浏览器发送请求的协议、域名和端口要和服务器接收请求的协议、域名以及端口一致,这样才能完成交互。很显然对于前后端分离的项目是不可能的,一定会使用两个端口,这样就出现了跨域问题
2. 解决办法
2.1 重写WebMvcConfigurer接口的addCorsMappings方法(全局生效)
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/**
* 解决跨域问题
*/
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") // 添加映射路径,/**表示对所有的路径实行全局跨域访问权限的设置
.allowedOriginPatterns("*") // 开放哪些IP、端口、域名的访问权限,*表示开放所有
.allowedMethods("GET", "POST", "PUT", "DELETE") // 开放哪些Http方法,允许跨域访问
.allowCredentials(true) // 是否允许发送Cookie信息
.allowedHeaders("*") // 允许HTTP请求中携带哪些Header信息
.exposedHeaders("*") // 暴露哪些头部信息(因为跨域访问默认不能获取全部头部信息)
.maxAge(3600); // 配置预检请求的有效时间,单位秒
}
}
2.2 使用CorsFilter拦截器(全局生效)
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
/**
* 解决跨域问题
*/
@Configuration
public class CorsFilterConfig {
@Bean
public CorsFilter corsFilter() {
CorsConfiguration config = new CorsConfiguration();
// 开放哪些IP、端口、域名的访问权限,*表示开放所有
config.addAllowedOriginPattern("*");
// 是否允许发送Cookie信息
config.setAllowCredentials(true);
// 开放哪些Http方法,允许跨域访问,*表示开放所有
config.addAllowedMethod("*");
// 允许HTTP请求中携带哪些Header信息
config.addAllowedHeader("*");
// 暴露哪些头部信息(因为跨域访问默认不能获取全部头部信息)
config.addExposedHeader("*");
// 配置预检请求的有效时间,单位秒
config.setMaxAge(3600L);
// 添加映射路径,/**表示对所有的路径实行全局跨域访问权限的设置
UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
configSource.registerCorsConfiguration("/**", config);
return new CorsFilter(configSource);
}
}
2.3 使用@CrossOrigin注解(局部生效)
将@CrossOrigin注解加在Controller层的类上,则整个类中的方法都支持跨域访问
@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "http://localhost:8082", maxAge = 3600)
public class MasterIndexController {
}
将@CrossOrigin注解加在Controller层的方法上,则只有该方法支持跨域访问
@GetMapping("/master-index")
@CrossOrigin(origins = "http://localhost:8082", maxAge = 3600)
public List<MasterIndex> getMasterIndex() {
return masterIndexService.getMasterIndex();
}