报错:
Access to XMLHttpRequest at 'http://127.0.0.1:8088/user/list' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. xhr.js?b50d:178 GET http://127.0.0.1:8088/user/list net::ERR_FAILED
在学习前后端分离开发的过程中,遇到这个报错是非常正常的,当然也是比较好解决的问题,莫非就是前端项目使用了一个端口,后端项目使用了一个端口,但是其实同一个ip,但是不同端口之间也不能直接获取信息的,那么就要解决它。
先说一下情况,当前我是一个Spring Boot项目,版本是2.x版本。
想要更多了解的话,你可以看一下我三年前写的一篇文章,这样子解决也行,如果是自己学习的话:SpringBoot+JSON+AJAX+ECharts+Fiddler实现前后端分离开发可视化(进阶篇)
直接看菜单部分即可,通过软件进行端口转发,但这其实还是有点麻烦的,而且不够灵活。
在Spring Boot项目中,解决非常简单,新建一个配置类,然后用注解注入即可:
@Configuration public class CorsConfig implements WebMvcConfigurer { public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedHeaders(CorsConfiguration.ALL) .allowedMethods(CorsConfiguration.ALL) .allowCredentials(true) .maxAge(3600); // 1小时内不需要再预检(发OPTIONS请求) } }
重启项目,就可以解决了!
当然,如果你还没解决,还有一个常见的错误,那就是,你前端的请求路径写错了,务必要小心!!!
如果是Spring Cloud
项目,使用的是Gateway
网关,可直接在GatewayApplication
加上以下内容即可:
@Bean public CorsWebFilter corsFilter() { CorsConfiguration config = new CorsConfiguration(); config.setAllowCredentials(Boolean.TRUE); config.addAllowedMethod("*"); config.addAllowedOrigin("*"); config.addAllowedHeader("*"); config.setMaxAge(3600L); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser()); source.registerCorsConfiguration("/**", config); return new CorsWebFilter(source); }
加上了就可以删掉上面的 CorsConfig
了,如果你有加了的话。