Java 結合 jQuery 實現跨域數據交互完整指南

什麼是跨域？

瀏覽器基於同源策略限制：協議、域名、端口三者必須完全相同，才允許 JavaScript 操作目標頁面的 DOM 或發起 AJAX 請求。否則視為跨域，請求會被瀏覽器攔截。

常見跨域場景：

• 主域相同，子域不同：xxx.aaa.com vs yyy.aaa.com
• 域名相同，端口不同：aaa.com:8000 vs aaa.com:80
• 協議不同：https://aaa.com vs https://aaa.com

解決方案一：主域相同 —— document.domain

僅適用於主域相同、子域不同場景。在兩個頁面中均設置：

document.domain = 'aaa.com';

即可互相訪問 DOM/JS 變量。注意：無法解決端口/協議不同導致的跨域。

解決方案二：主域不同 —— JSONP (JSON with Padding)

利用 <script> 標籤不受同源策略限制的特性，動態創建腳本標籤請求數據，服務端返回可執行的 JavaScript 函數調用，客戶端預定義回調函數處理數據。

核心原理：

1. 客戶端定義回調函數 success_jsonpCallback(data)。
2. 發請求時帶上參數 jsoncallback=success_jsonpCallback。
3. 服務端接收參數，構造字符串：success_jsonpCallback({"name":"張三","age":28})。
4. 響應 Content-Type: text/plain;charset=UTF-8，瀏覽器執行腳本，觸發回調。

前端實現：

方式 1：jQuery $.ajax (推薦，可控性強)

$.ajax({
    type: "get",
    async: false,
    url: "https://api.example.com/data",
    dataType: "jsonp",
    jsonp: "jsoncallback",           // 傳遞回調函數名的參數名
    jsonpCallback: "successCallback", // 自定義回調函數名
    success: function(json) {
        console.log("跨域數據:", json);
    }
});

方式 2：jQuery $.getJSON (簡寫，回調函數名自動生成)

$.getJSON("https://api.example.com/data?jsoncallback=?", function(data) {
    console.log("數據:", data);
});

注意：? 會被 jQuery 替換為隨機生成的回調函數名。不支持 POST，URL 長度有限制，不適合大數據量。

後端實現：

public void jsonpTest(HttpServletRequest request, HttpServletResponse response) throws IOException {
    String callbackName = request.getParameter("jsoncallback"); // 獲取回調函數名
    String jsonStr = "{\"name\":\"張三\",\"age\":28}";           // 業務數據 JSON
    String renderStr = callbackName + "(" + jsonStr + ")";      // 拼裝可執行 JS
    
    response.setContentType("text/plain;charset=UTF-8");
    response.getWriter().write(renderStr);
}

關鍵注意事項

• 安全性：JSONP 本質是執行第三方腳本，僅用於可信來源的公開數據，嚴禁傳輸敏感信息（Token、用戶隱私）。
• 錯誤處理：JSONP 難以捕獲 HTTP 狀態碼（404/500），需約定業務狀態碼在 JSON 內部返回。
• 現代替代方案：CORS (Cross-Origin Resource Sharing) 是當前主流標準，服務端設置 Access-Control-Allow-Origin 響應頭即可，支持所有 HTTP 方法、請求頭、憑證攜帶，配置更靈活安全。

總結

JSONP 是歷史產物，解決老瀏覽器跨域的權宜之計。新項目請優先使用 CORS 或 Nginx 反向代理（同源部署），架構更清晰、安全可控。