前端调用接口说是有跨域问题,让我解决一下。一顿操作猛如虎,测试验证通过,增加配置如下:
@Configurationpublic class WebAppConfigurer implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowCredentials(true) .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE","OPTIONS") .maxAge(3600); }}
这边还没坐稳,前端又来报,下一个接口还是跨域。主要是我这配置的所有接口啊,怎么会只有一个生效了。看来需要好好看一下了。跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。
同源策略限制了以下行为:
Cookie、LocalStorage 和 IndexDB 无法读取
DOM 和 JS 对象无法获取
Ajax请求发送不出去
所谓的同源是指,域名、协议、端口均为相同:
http://www.nealyang.cn/index.html 调用 http://www.nealyang.cn/server.php 非跨域http://www.nealyang.cn/index.html 调用 http://www.neal.cn/server.php 跨域,主域不同http://abc.nealyang.cn/index.html 调用 http://def.neal.cn/server.php 跨域,子域名不同http://www.nealyang.cn:8080/index.html 调用 http://www.nealyang.cn/server.php 跨域,端口不同https://www.nealyang.cn/index.html 调用 http://www.nealyang.cn/server.php 跨域,协议不同localhost 调用 127.0.0.1 跨域
经过一番查找终于找到问题所在。继续修改,将
WebAppConfigurer的配置改为:
private CorsConfiguration corsConfig() { CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedOrigin("*"); corsConfiguration.addAllowedHeader("*"); corsConfiguration.addAllowedMethod("*"); corsConfiguration.setAllowCredentials(true); corsConfiguration.setMaxAge(3600L); return corsConfiguration; } @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", corsConfig()); return new CorsFilter(source); }
测试验证没有问题。那么为什么会出现之前一个接口可以呢?原来是在
WebAppConfigurer中还配置了自定义拦截器验证token,拦截器除外的请求中有登录的接口,而第一次测试验证就是用的登录接口进行测试的。这是因为在请求到来时会先进入拦截器中,而登录接口被除外,当使用调用其他接口时,请求进入了拦截器,拦截器验证token没有通过直接跳过了后续所有处理。虽然是因为token没有验证通过,但跳过了跨域配置,浏览器不会显示token验证失败的问题直接爆出跨域问题。那么根据我们的分析,在拦截器
preHandle方法中添加跨域的配置应该也是可以的。具体代码如下:
response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Headers","*");response.setHeader("Access-Control-Allow-Methods","*");response.setHeader("Access-Control-Allow-Credentials","true");response.setHeader("Access-Control-Max-Age","3600");
除此之外,来自网上其他网友的提示,使用springboot自带的注解
CrossOrigin也是可以的。可以放在
RestController的类上或者方法上,还能自定义那些域名可以跨域,非常灵活
参考:
https://segmentfault.com/a/1190000010348077
https://blog.csdn.net/qq_39007083/article/details/103582232
https://segmentfault.com/a/1190000018018849
https://www.imooc.com/article/21976