今天在移植一个springMVC的旧项目的前端框架到spring cloud项目上出现了一个奇怪的问题,页面上的所有小图标都变成了□!!其它图片样式什么的都正常,然后逐个相关的js文件css文件排查都没有问题。旧项目的静态资源是放在WebRoot下访问的没有问题而新项目是放在src/main/resources下的还出现了跨域的问题!!
最后找到了问题原因是Maven对woff 、woff2、ttf这类的文件进行了过滤而页面上出现□的小图标正是这样的文件产生的,在pom.xml文件添加
<plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-resources-plugin</artifactId> <configuration> <nonFilteredFileExtensions> <nonFilteredFileExtension>woff</nonFilteredFileExtension> <nonFilteredFileExtension>woff2</nonFilteredFileExtension> <nonFilteredFileExtension>eot</nonFilteredFileExtension> <nonFilteredFileExtension>ttf</nonFilteredFileExtension> <nonFilteredFileExtension>svg</nonFilteredFileExtension> </nonFilteredFileExtensions> </configuration> </plugin>
关于spring cloud跨域的
@Configuration public class WebMvcConfig implements WebMvcConfigurer{ @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedMethods("*") .allowedOrigins("*") .allowedHeaders("*"); } @Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(new LoginHandlerInterceptor()).addPathPatterns("/**").excludePathPatterns("/"); } }
@Configuration public class ZuulFilterConfig { @Bean public FilterRegistrationBean corsFilter() { final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); final CorsConfiguration config = new CorsConfiguration(); config.setAllowCredentials(true); config.addAllowedOrigin("*"); config.addAllowedHeader("*"); config.setMaxAge(1800L); config.addAllowedMethod("*"); //允许的提交方法 config.addAllowedMethod("HEAD"); config.addAllowedMethod("GET"); config.addAllowedMethod("PUT"); config.addAllowedMethod("POST"); config.addAllowedMethod("DELETE"); config.addAllowedMethod("PATCH"); source.registerCorsConfiguration("/**", config); FilterRegistrationBean bean = new FilterRegistrationBean(new org.springframework.web.filter.CorsFilter(source)); bean.setOrder(0); return bean; } }
参考:https://www.cnblogs.com/rocker-pg/p/9470195.html