SpringBoot无法访问静态资源（js、css、image）的问题

雨点打透心脏的1/2处 2023-07-01 11:58 1阅读 0赞

## 场景 ##

新建`SpringBoot`项目，继承父项目，导入依赖。

<?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
        <modelVersion>4.0.0</modelVersion>
    
        <groupId>com.qianyu</groupId>
        <artifactId>demo</artifactId>
        <version>1.0-SNAPSHOT</version>
    
        <parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>2.2.3.RELEASE</version>
            <relativePath/> 
        </parent>
    
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-thymeleaf</artifactId>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
        </dependencies>
    </project>

在`/resources/templates/`文件夹下，新建`index.html`文件

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>index</title>
    </head>
    <body>
    <h1>index界面</h1>
    <script type="application/javascript" src="/js/sayhello.js"></script>
    <script> hello(); </script>
    </body>
    </html>

`index.html`文件里面引入的`js`文件是`/resources/static/js/`文件夹下的`sayhello.js`

function hello() { 
        alert('hello')
    }

新建`Controler`

@Controller
    public class IndexController { 
        @GetMapping("/")
        public String index(){ 
            return "index";
        }
    }

新建启动类，启动`SpringBoot`程序：

@SpringBootApplication
    public class App { 
        public static void main(String[] args) { 
            SpringApplication.run(App.class, args);
        }
    }

可见`js`文件顺利引入：  
![运行结果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70]

## 加入拦截器 ##

新建拦截器，作用：打印访问网站的用户的ip地址

@Component
    public class LogInterceptor implements HandlerInterceptor { 
        @Override
        public boolean preHandle(HttpServletRequest req, HttpServletResponse res, Object handler) throws Exception { 
            System.out.println("ip ：" + req.getRemoteAddr() + " 访问了网站");
            return true;
        }
    }

配置拦截器：

@Configuration
    @EnableWebMvc
    public class WebConfig implements WebMvcConfigurer { 
        @Autowired
        private LogInterceptor logInterceptor;
    
        @Override
        public void addInterceptors(InterceptorRegistry registry) { 
            registry.addInterceptor(logInterceptor)
                    .addPathPatterns("/**");
        }
    }

再次访问网站：  
![错误界面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70 1]

## 解决方法 ##

经查阅资料，参考文章：[Spring注解@EnableWebMvc使用坑点解析][Spring_EnableWebMvc]，发现`Spring Boot` 默认提供`Spring MVC` 自动配置，不需要使用`@EnableWebMvc`注解，于是将`@EnableWebMvc`注释掉就可以访问静态资源了。  
![代码截图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200121193818840.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200121195000916.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ==,size_16,color_FFFFFF,t_70
[Spring_EnableWebMvc]: https://blog.csdn.net/zxc123e/article/details/84636521
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200121195552490.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ==,size_16,color_FFFFFF,t_70