微信網頁開發：授權回調後 CSS/JS 失效的攔截器配置陷阱

現象

微信瀏覽器直接訪問頁面正常，但經 snsapi_base / snsapi_userinfo 授權跳轉回來後，**所有 CSS 樣式與 JS 腳本失效**，頁面裸奔。

根因

後端攔截器/過濾器對授權回調路徑（如 /oauth2/callback）進行了身份驗證，但錯誤地將靜態資源（.css、.js、.png 等）也納入攔截範圍，導致靜態資源請求被重定向至登入頁或返回 401/302，瀏覽器無法加載樣式/腳本。

排查定位步驟

1. 打開瀏覽器開發者工具 Network 面板，觀察授權跳轉後 CSS/JS 請求狀態碼（通常是 302 Found 或 401 Unauthorized）。
2. 點擊該請求查看 Response Headers 的 Location，確認是否重定向至登入/錯誤頁。
3. 檢查後端攔截器配置（Spring MVC HandlerInterceptor、Servlet Filter、Shiro [urls] 等）。

修正方案

方案一：攔截器排除靜態資源路徑（推薦）

// Spring MVC Interceptor 配置
registry.addInterceptor(authInterceptor)
        .addPathPatterns("/**")
        .excludePathPatterns("/static/**", "/css/**", "/js/**", "/images/**", "/oauth2/callback"); // 關鍵：排除回調與靜態資源

方案二：僅攔截業務頁面，放行靜態資源與回調

// Shiro ini 配置範例
[urls]
/static/** = anon
/css/** = anon
/js/** = anon
/oauth2/callback = anon
/** = authc

方案三：Nginx/前端服務器直接代理靜態資源，繞過應用層攔截

location /static/ {
    alias /var/www/app/static/;
    expires 30d;
    add_header Cache-Control "public";
}

核心原則

授權回調端點必須匿名訪問；靜態資源永遠不應受身份驗證攔截。

微信開發中，將「靜態資源白名單」配置在攔截器最前面，可避免 90% 的「授權後樣式消失」問題。