JSP 中 JS 文件 404 找不到原因排查：Spring MVC url-pattern 衝突

問題現象

• JS 檔案放在 `WebContent/js/` 目錄
* JSP 引用：``
• 瀏覽器開發者工具顯示：`Failed to load resource: 404 (Not Found)`

根本原因

`web.xml` 中 `DispatcherServlet` 的 `url-pattern` 設為 `/`，**攔截了所有靜態資源請求**，導致 Spring MVC 嘗試尋找對應 Controller 而失敗返回 404。

錯誤配置示例

<servlet>
    <servlet-name>springMvc</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>springMvc</servlet-name>
    <url-pattern>/</url-pattern>  <!-- 罪魁禍首 -->
</servlet-mapping>

三種解決方案

方案一：`` 映射靜態資源（推薦）

<!-- spring-mvc.xml -->
<mvc:resources mapping="/js/**" location="/js/" />
<mvc:resources mapping="/css/**" location="/css/" />
<mvc:resources mapping="/images/**" location="/images/" />

<!-- 必須啟用註解驅動 -->
<mvc:annotation-driven />

方案二：`` 委派給預設 Servlet

<mvc:default-servlet-handler />

讓容器預設 Servlet（如 Tomcat 的 `DefaultServlet`）處理靜態資源，Spring MVC 僅處理動態請求。

方案三：修改 `url-pattern` 避開靜態路徑

<servlet-mapping>
    <servlet-name>springMvc</servlet-name>
    <url-pattern>*.do</url-pattern>  <!-- 或 /app/* -->
</servlet-mapping>

缺點：RESTful 風格 URL 需額外配置 `HiddenHttpMethodFilter`。

完整修正配置範例

<!-- web.xml -->
<servlet>
    <servlet-name>dispatcher</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:spring-mvc.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>dispatcher</servlet-name>
    <url-pattern>/</url-pattern>
</servlet-mapping>

<!-- spring-mvc.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="https://www.springframework.org/schema/beans"
       xmlns:mvc="https://www.springframework.org/schema/mvc"
       xmlns:context="https://www.springframework.org/schema/context"
       xsi:schemaLocation=".../beans.xsd .../mvc.xsd .../context.xsd">

    <context:component-scan base-package="com.example.controller" />
    
    <mvc:annotation-driven />
    
    <!-- 靜態資源映射 -->
    <mvc:resources mapping="/js/**" location="/js/" cache-period="31536000" />
    <mvc:resources mapping="/css/**" location="/css/" cache-period="31536000" />
    <mvc:resources mapping="/images/**" location="/images/" cache-period="31536000" />
    <mvc:resources mapping="/plugins/**" location="/plugins/" />
    
    <!-- 視圖解析器 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/views/" />
        <property name="suffix" value=".jsp" />
    </bean>
</beans>

JSP 中正確引用路徑

<!-- 使用 JSTL c:url 自動加上 contextPath -->
<%@ taglib prefix="c" uri="https://java.sun.com/jsp/jstl/core" %>
<script src="<c:url value='/js/main.js' />"></script>
<link href="<c:url value='/css/style.css' />" rel="stylesheet" />

<!-- 或手動加上 ${pageContext.request.contextPath} -->
<script src="${pageContext.request.contextPath}/js/main.js"></script>

除錯檢查清單

1. 確認 `web.xml` `url-pattern` 是否為 `/`
2. 確認 `spring-mvc.xml` 有 ``
3. 確認 `` 的 `mapping` 與 `location` 路徑對應正確
4. 確認實體檔案確實存在於 `WebContent/js/`（非 `WEB-INF` 下）
5. 瀏覽器 Network 面板查看實際請求 URL 是否包含 `contextPath`
6. 清除瀏覽器快取或使用無痕模式測試

Spring Boot 專案對應配置

# application.properties
spring.mvc.static-path-pattern=/resources/**
spring.resources.static-locations=classpath:/static/,classpath:/public/

# 或 Java Config
@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/js/**").addResourceLocations("/js/")
                .setCachePeriod(31536000);
    }
}

掌握 Spring MVC 靜態資源映射機制，即可徹底解決 JS/CSS/圖片 404 問題，並能正確配置快取策略提升前端載入效能。