AJAX 跨域解決方案：JSONP 與 Nginx 反向代理兩種實戰對比

AJAX 跨域解決方案：JSONP 與 Nginx 反向代理兩種實戰對比

瀏覽器同源策略限制 AJAX 跨域請求。開發環境正常，部署後因域名/端口不同導致跨域失敗。介紹兩種主流解決方案。

方案一：JSONP（客戶端適配）

利用 <script> 標籤不受同源策略限制的特性，約定回調函數名。

// 客戶端 jQuery
$.ajax({
    type: "GET",
    url: "https://api.example.com/ajax.do",
    dataType: "jsonp",
    jsonp: "callbackparam",      // 服務端接收回調函數名的參數名
    jsonpCallback: "success_jsonpCallback", // 回調函數名
    success: function(json) { console.log(json); },
    error: function() { alert('fail'); }
});

// 服務端 
public void ProcessRequest(HttpContext context) {
    context.Response.ContentType = "text/plain";
    string callback = context.Request["callbackparam"];
    context.Response.Write(callback + "([{name:'John'}])");
}

優點：前端改動小，無需後端配置 CORS。缺點：僅支持 GET，每個接口需改造，多項目改動量大。

方案二：Nginx 反向代理（基礎設施層透明解決）

在 Nginx 配置 proxy_pass 將前端域名下的 API 路徑代理到後端真實地址，瀏覽器視為同源請求。

# nginx.conf
server {
    listen 80;
    server_name frontend.example.com;
    location /api/ {
        proxy_pass https://backend.example.com/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

優點：前後端代碼零改動，支持所有 HTTP 方法，統一管理跨域、負載均衡、緩存、SSL。缺點：需運維權限配置 Nginx。

選型建議

• 項目較小、接口少、無運維支持 → JSONP 快速接入。
• 項目規模大、接口多、有專業運維 → Nginx 反向代理一勞永逸。