• spring boot 项目页面图标出现“□”问题


      今天在移植一个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

  • 相关阅读:
    PHP学习路径及练手项目合集
    Java学习路径及练手项目合集
    Pandas 常见的基本方法
    MAC 下配置MQTT 服务器Mosquitto
    MQTT 在 mac 上搭建
    Git学习--版本回退
    Git学习--创建版本库
    js判断是否在微信浏览器中打开
    微信浏览器HTTP_USER_AGENT判断
    XXX.APP已损坏,打不开.你应该将它移到废纸篓
  • 原文地址:https://www.cnblogs.com/pengjf/p/10062162.html
Copyright © 2020-2023  润新知