Cors跨域

前端请求获取后端数据需要设置跨域,否则数据显示不了,这时我们就要在后端设置跨域
我们有两种方法设置跨域
一是全局设置,编写跨域配置类。
二是部分接口跨域,只需在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

你可能感兴趣的:(Cors跨域)