zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    委托学习笔记一(调用委托)
    委托和事件— 一个虚构的故事
    WPF中控制窗口状态
    oracle创建DBLINK
    添加路由 route add
    通过脚本执行sql语句
    c#对声音系统的控制
    ProcessBuilder调用外部脚本
    sql server 重新编译所有视图
    silverlight 隐藏ChildWindow 右上角的关闭按钮
  • 原文地址:https://www.cnblogs.com/pengjf/p/10062162.html
Copyright © 2011-2022 走看看