前端请求获取后端数据需要设置跨域,否则数据显示不了,这时我们就要在后端设置跨域
我们有两种方法设置跨域
一是全局设置,编写跨域配置类。
二是部分接口跨域,只需在controller层中需要跨域的地方注解@CrossOrigin(allowedHeaders = "",allowCredentials="true",origins = "")即可
详细介绍:
1.全局配置
- 如果想添加全局配置,则需要添加一个配置类
@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
.maxAge(3600)
.allowCredentials(true);
}
}
- 还可以通过添加 Filter 的方式,配置 CORS 规则,并手动指定对哪些接口有效
@Bean
public FilterRegistrationBean corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true); config.addAllowedOrigin("http://localhost:9000");
config.addAllowedOrigin("null");
config.addAllowedHeader("*");
config.addAllowedMethod("*");
source.registerCorsConfiguration("/**", config); // CORS 配置对所有接口都有效
FilterRegistrationBean bean = newFilterRegistrationBean(new CorsFilter(source));
bean.setOrder(0);
return bean;
}
2.部分接口跨域
找到我们需要跨域的接口,在方法上添加 @CrossOrigin 注解
- 可以在整个controller层添加注解,这样在本controller层以内的所有方法都可以跨域了
其中@CrossOrigin中的2个参数:
origins: 允许可访问的域列表(设置"*"则都可访问)
maxAge:准备响应前的缓存持续的最大时间(以秒为单位)。
@CrossOrigin(origins = "xxx", maxAge = 3600)
@RestController
@RequestMapping("/user")
public class AccountController {
@GetMapping("/find)
public User find(Intrger id) {
}
- 也可以只向某一个方法方法添加@CrossOrigin注解
@RestController
@RequestMapping("/user")
public class AccountController {
@CrossOrigin(origins = "xxx", maxAge = )
@GetMapping("/find)
public User find(Intrger id) {
}
spring注解@CrossOrigin不起作用的原因
1、是springMVC的版本要在4.2或以上版本才支持@CrossOrigin
2、非@CrossOrigin没有解决跨域请求问题,而是不正确的请求导致无法得到预期的响应,导致浏览器端提示跨域问题。
3、在Controller注解上方添加@CrossOrigin注解后,仍然出现跨域问题,解决方案之一就是:
在@RequestMapping注解中没有指定Get、Post方式,具体指定后,问题解决。
@CrossOrigin内的参数
1.String[] origins: 允许来源域名的列表,例如 'www.xxx.com',匹配的域名是跨域预请求 Response 头中的 'Access-Control-Aloow_origin' 字段值。不设置确切值时默认支持所有域名跨域访问。
2.String[] allowedHeaders: 跨域请求中允许的请求头中的字段类型, 该值对应跨域预请求 Response 头中的 'Access-Control-Allow-Headers' 字段值。 不设置确切值默认支持所有的header字段(Cache-Controller、Content-Language、Content-Type、Expires、Last-Modified、Pragma)跨域访问。
3.String[] exposedHeaders: 跨域请求请求头中允许携带的除Cache-Controller、Content-Language、Content-Type、Expires、Last-Modified、Pragma这六个基本字段之外的其他字段信息,对应的是跨域请求 Response 头中的 'Access-control-Expose-Headers'字段值。
4.RequestMethod[] methods: 跨域HTTP请求中支持的HTTP请求类型(GET、POST...),不指定确切值时默认与 Controller 方法中的 methods 字段保持一致。
5.String allowCredentials: 该值对应的是是跨域请求 Response 头中的 'Access-Control-Allow-Credentials' 字段值。浏览器是否将本域名下的 cookie 信息携带至跨域服务器中。默认携带至跨域服务器中,但要实现 cookie 共享还需要前端在 AJAX 请求中打开 withCredentials 属性。
6.ong maxAge: 该值对应的是是跨域请求 Response 头中的 'Access-Control-Max-Age' 字段值,表示预检请求响应的缓存持续的最大时间,目的是减少浏览器预检请求/响应交互的数量。默认值1800s。设置了该值后,浏览器将在设置值的时间段内对该跨域请求不再发起预请求。
(注:添加了全局跨域配置就不需要再在方法接口上添加@CrossOrigin注解了)
本文来源:
一个博客:https://blog.csdn.net/MobiusStrip/article/details/84849418
一个知乎:https://zhuanlan.zhihu.com/p/66789473
等