本地全端開發 HTTP 錯誤說明

常見 HTTP 狀態碼

400 Bad Request

請求格式錯誤，後端無法解析。

JSON 格式錯誤或缺欄位
Content-Type 未設為 application/json
@RequestBody 對應失敗

一句話：你送的資料不對。

401 Unauthorized

驗證失敗，伺服器不知道你是誰。

未登入
JWT 過期或無效

403 Forbidden

已通過驗證，但沒有權限存取。

角色 / 權限不足
JWT scope 不夠
IP 或 CORS 被擋

一句話：我知道你是誰，但你不能。

500 Internal Server Error

伺服器內部錯誤。

程式例外
資料庫或外部服務錯誤

本地開發時 403 的真實原因（高命中率）

1️⃣ 請求根本沒進到 Controller

如果你改了很多 auth / jwt / service 類別都沒效果，代表請求在 Spring Security Filter 就被擋掉了。

❌ 問題通常不在 JWT 邏輯
✅ 問題在 Filter / CORS / CSRF / Header

2️⃣ Authorization Header 沒送

Authorization: Bearer <jwt-token>

請在 Chrome F12 → Network → Request Headers 確認。

3️⃣ CORS 設定錯誤（最常見）

前端：http://localhost:5173
後端：http://localhost:8080
→ 不同 origin，必須設定 CORS

@Bean
public CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowedOrigins(List.of("http://localhost:5173"));
    config.setAllowedMethods(List.of("GET","POST","PUT","DELETE","OPTIONS"));
    config.setAllowedHeaders(List.of("*"));
    config.setAllowCredentials(true);

    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", config);
    return source;
}

4️⃣ OPTIONS 預檢請求被擋

瀏覽器會先送 OPTIONS，如果沒放行就直接 403。

.requestMatchers(HttpMethod.OPTIONS, "/**").permitAll()

5️⃣ CSRF 沒關

JWT + 前後端分離，通常必須關 CSRF。

csrf(csrf -> csrf.disable())

本地開發時 400 的常見原因

@RequestBody 但前端沒送 JSON
Content-Type 未設 application/json
DTO 欄位缺失或型別錯誤

Vue3 正確請求範例

axios.post('/api/login', data, {
  headers: {
    'Content-Type': 'application/json'
  }
})

🚀 快速除錯定位心法

錯誤現象	首要懷疑對象
Console 報 403，但後端 Log 沒動靜	CORS 設定或 Spring Security Filter
後端 Log 報 `Bad Credentials`	JWT SecretKey 錯位或過期
後端 Log 有進 Controller 但噴 400	Jackson 解析 DTO 失敗 (欄位名稱對不上)