JSONPを使用したクロスドメイン通信
JSONP（JSON with Padding）は、同一生成元ポリシーの制限を回避するための一般的な手法です。以下にJavaバックエンドとJavaScriptフロントエンドの実装例を示します。
サーバーサイド実装
package com.example.web.controller;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.LinkedHashMap;
import java.util.Map;
@RestController
public class CrossDomainController {
@GetMapping("/api/data")
public void handleRequest(HttpServletRequest req, HttpServletResponse resp) throws IOException {
Map<String, Object> responseData = new LinkedHashMap<>();
responseData.put("code", 200);
responseData.put("status", "success");
responseData.put("payload", "クロスドメイン通信テスト");
ObjectMapper jsonMapper = new ObjectMapper();
String jsonString = jsonMapper.writeValueAsString(responseData);
PrintWriter writer = resp.getWriter();
String callbackFunction = req.getParameter("callback");
if (callbackFunction == null || callbackFunction.isEmpty()) {
writer.print(jsonString);
} else {
writer.print(callbackFunction + "(" + jsonString + ")");
}
writer.close();
}
}
クライアントサイド実装
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>クロスドメイン通信サンプル</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>JSONP通信テスト</h1>
<div id="result"></div>
<script>
// 通常のAJAXリクエストではCORSエラーが発生します
/*
$.ajax({
method: "GET",
url: "http://api.example.com:8080/api/data",
success: function(response) {
$("#result").html("<pre>" + JSON.stringify(response, null, 2) + "</pre>");
},
error: function(xhr) {
$("#result").html("エラー: " + xhr.status);
}
});
*/
// JSONPを使用したクロスドメイン通信
$.ajax({
method: "GET",
url: "http://api.example.com:8080/api/data",
dataType: "jsonp",
jsonp: "callback",
jsonpCallback: "receiveData",
success: function(response) {
$("#result").html("<pre>" + JSON.stringify(response, null, 2) + "</pre>");
console.log("サーバーからの応答:", response);
},
error: function(xhr) {
$("#result").html("通信エラー: " + xhr.status);
console.error("JSONPリクエスト失敗");
}
});
</script>
</body>
</html>
JSONPの仕組みでは、サーバーはデータをJSON形式で返す際に、クライアントが指定したコールバック関数でラップします。これにより、ブラウザの同一生成元ポリシーをバイパスできます。ただし、JSONPはGETリクエストのみサポートしており、セキュリティ上の考慮事項もあります。