JSONP 跨域原理與數據接收實戰

核心機制

<script> 標籤的 src 屬性不受同源策略限制。服務端返回可執行的 JS 代碼：callbackName({"Name":"ss", "Age":45})，瀏覽器加載後立即執行，調用全局函數 callbackName 並傳入數據對象。

前端實現

// 1. 定義全局回調函數（必須在 window 下，不能在局部作用域）
window.handleUser = function(data) {
    console.log(data.Name, data.Age);
    // 更新 DOM 等業務邏輯
};

// 2. 動態創建 script 標籤發起請求
var script = document.createElement('script');
script.src = 'https://api.example.com/user?callback=handleUser';
document.head.appendChild(script);

服務端響應示例

// PHP
$callback = $_GET['callback'];
$data = ['Name' => 'ss', 'Age' => 45];
echo "$callback(" . json_encode($data) . ")";

安全注意

• 嚴格驗證 callback 參數格式（僅允許字母數字下劃線），防 XSS。
• 生產環境優先使用 CORS，JSONP 僅作為老舊瀏覽器兼容方案。