[JavaScript]JSONP為什麼不能用POST

2016-12-26 166 words One minute

Contents

為什麼JSONP不能使用POST?
因為JSONP透過script標籤實作
所以才沒辦法做

JSONP 的工作原理

JSONP（JSON with Padding）是一種繞過瀏覽器**同源政策（Same-Origin Policy）**限制的技術，在 CORS 尚未普及時被廣泛使用。

其核心原理是：<script> 標籤不受同源政策限制，可以載入任意來源的 JavaScript 檔案。JSONP 就是利用這一點，動態建立 <script> 標籤來發送跨域請求：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// 1. 定義回呼函式
function handleResponse(data) {
  console.log('收到資料：', data);
}

// 2. 動態建立 script 標籤，附上 callback 參數
var script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

// 3. 伺服器回傳的內容（不是 JSON，是 JS 函式呼叫）
// handleResponse({"name": "John", "age": 30});

為什麼 JSONP 只能用 GET？

<script> 標籤的 src 屬性只能發送 HTTP GET 請求，不支援 POST、PUT、DELETE 等方法。這是 HTML 規範決定的，無法透過 JavaScript 改變。

因此 JSONP 天生只能使用 GET，無法傳送請求體（Request Body）。

JSONP 的安全性問題

JSONP 存在嚴重的安全隱患：

XSS 風險：伺服器回傳的內容會被當作 JavaScript 執行，若第三方 API 被入侵，惡意程式碼會直接在你的網站執行。
CSRF 風險：任何網站都可以用 JSONP 呼叫你的 API，若 API 依賴 Cookie 認證，可能被惡意網站竊取資料。
無法設定請求標頭：無法加入 Authorization、Content-Type 等自訂標頭，限制了認證機制的選擇。

現代替代方案：CORS

CORS（Cross-Origin Resource Sharing）是現代標準的跨域解決方案，透過 HTTP 標頭來控制跨域存取：

1
2
3


Access-Control-Allow-Origin: https://your-site.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization

比較項目	JSONP	CORS
支援方法	只有 GET	所有 HTTP 方法
安全性	較低	較高（有 Preflight 機制）
錯誤處理	困難	標準 HTTP 狀態碼

現代專案應優先使用 CORS，JSONP 已屬於過時技術。