html 跨域_配置跨域成功又失败了

前端调用接口说是有跨域问题，让我解决一下。一顿操作猛如虎，测试验证通过，增加配置如下：

@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