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

  • 相关阅读:
    生成二维码
    【C#】教你纯手工用C#实现SSH协议作为GIT服务端
    Git断点续传和离线增量更新的实现
    微信定位真的泄露了你的精确位置
    Helper Files
    正则表达式的一些应用
    Apache配置SSL实现HTTP转HTTPS及可能出现的问题(配置https启动不了的解决办法)
    Python3 采集APP数据及相关配置
    Laravel 5 中间件、路由群组、子域名路由、 权限控制的基本使用方法
    Python3使用cookielib模块
  • 原文地址:https://www.cnblogs.com/pengjf/p/10062162.html
Copyright © 2011-2022 走看看