Spring 4.1+ JSONP 跨域解決方案完整指南

JSONP 原理

JSONP (JSON with Padding) 利用 <script> 標籤不受同源策略限制的特性，請求伺服器返回「包裹在回調函數中的 JSON 資料」，瀏覽器直接作為 JavaScript 執行，實現跨域資料獲取。

Spring 4.1 原生支援：MappingJacksonValue

@RestController
@RequestMapping("/api")
public class ItemController {
    @Autowired ItemService itemService;

    @GetMapping("/categories")
    public Object getCategories(@RequestParam(required = false) String callback) {
        CategoryResult result = itemService.getCategoryTree();

        // 無 callback 參數：返回純 JSON (支援 CORS 或同域)
        if (StringUtils.isBlank(callback)) return result;

        // 有 callback：包裝為 JSONP
        MappingJacksonValue container = new MappingJacksonValue(result);
        container.setJsonpFunction(callback); // 設定回調函數名
        return container;
    }
}

前端 jQuery 調用範例

$.ajax({
    url: "https://api.example.com/api/categories",
    dataType: "jsonp",        // 關鍵：告訴 jQuery 使用 JSONP
    jsonp: "callback",        // 參數名 (對應後端 @RequestParam)
    jsonpCallback: "handleCategories", // 自定義回調函數名 (可選，jQuery 預設生成)
    success: function(data) {
        renderMenu(data); // data 即為解析後的 JSON 物件
    }
});

回調函數命名最佳實踐

• 後端接收參數名統一為 callback (Spring MVC 預設)。
• 前端可指定固定函數名 jsonpCallback 便於快取與除錯，或讓 jQuery 自動生成 (預設 jQuery123456789)。
• 回調函數必須定義在全域作用域 (window.handleCategories)。

JSONP vs CORS 對比

安全建議

• 嚴格驗證 callback 參數格式 (僅允許字母數字下劃線)，防止 XSS 注入。
• 敏感資料嚴禁使用 JSONP，請改用 CORS + Token 認證。
• 設定 Content-Type: application/javascript;charset=UTF-8 (Spring 自動處理)。