🌐 Spring Framework 講座【第36回】フロントエンドの進化に対応！〜モダンなフロントエンドとの連携（SPA/CORS）〜

前回までで、Spring Bootを強力なバックエンドとして構築するための技術（DB、セキュリティ、ログなど）を習得しました。

しかし、現代のWebアプリケーションは、ユーザー体験向上のため、ReactやVue.js、AngularといったモダンなJavaScriptフレームワークをフロントエンドに採用するケースが増えています。これらのフレームワークは、**SPA（Single Page Application）**と呼ばれる形態を取ります。

今回は、Spring Bootバックエンドが、これらのモダンなフロントエンド（SPA）と連携するために不可欠な概念と、その設定方法を学びます。

1. SPA（Single Page Application）と従来のWebアプリの違い

従来のWebアプリケーションは、サーバー（Spring Bootなど）がHTML全体を生成し、ページ遷移のたびに新しいHTMLを送り直す形態でした。

一方、SPAは、最初のロード時に一度だけHTMLファイルをロードし、その後の画面の切り替えやデータの更新をJavaScriptが動的に行います。

項目	従来のWebアプリケーション	SPA（モダンフロントエンド）
画面遷移	サーバーが新しいHTMLを返してリロード	JavaScriptがDOMを操作し、リロードなし
役割分担	サーバー側でHTMLを生成（Controller）	サーバーはJSONデータのみを返す（API）
通信方法	ページ遷移、フォーム送信	Ajax/FetchによるAPI呼び出し

Spring Bootは、このSPAの要請に応えるため、HTMLを返すControllerの役割を減らし、JSONデータをやり取りするAPIサーバーとしての役割が中心となります。

2. バックエンドとフロントエンドの分離による問題：CORS

SPAでは、フロントエンド（例：http://localhost:3000 で動作）とバックエンドAPI（例：http://localhost:8080 で動作）が、**異なるポート（オリジン）**で動作することが一般的です。

このとき、ブラウザのセキュリティ機能により、あるオリジン（例：http://localhost:3000）から異なるオリジン（例：http://localhost:8080）へAjaxリクエストを送信すると、セキュリティ上の制限がかかり、通信がブロックされます。

この制限を解除するための仕組みが **CORS（Cross-Origin Resource Sharing、クロスオリジンリソース共有）**です。

2-1. Spring BootでのCORS設定（Global設定）

Spring Bootでは、グローバルなCORS設定を行うための WebMvcConfigurer インターフェースを提供しており、これで簡単に許可するオリジンを指定できます。

Java

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**") // ① どのパスへのリクエストに対してCORSを許可するか
                .allowedOrigins("http://localhost:3000", "https://prod-frontend.com") // ② 許可するフロントエンドのオリジン（重要）
                .allowedMethods("GET", "POST", "PUT", "DELETE") // ③ 許可するHTTPメソッド
                .allowCredentials(true) // ④ クッキーなどの認証情報（セッションIDなど）の送信を許可
                .maxAge(3600); // ⑤ プリフライトリクエストの結果をキャッシュする時間
    }
}

この設定により、フロントエンド（http://localhost:3000 など）から /api/ から始まるバックエンドAPIへ安全にアクセスできるようになります。

2-2. CORS設定（Controller単位）

特定のControllerやメソッドだけCORSを許可したい場合は、@CrossOrigin アノテーションを使用できます。

Java

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin(origins = "http://localhost:3000", methods = {RequestMethod.GET}) // Controller全体に適用
public class ItemController {
    
    // ...
}

3. APIサーバーとしての設計

SPAをターゲットとするSpring Bootバックエンドでは、以下の設計を徹底します。

JSON形式でのやり取り: リクエストとレスポンスは、必ず JSON 形式で行う。
- Controllerには @RestController を使用し、@RequestBody や ResponseEntity<T> を活用する。
URI設計: APIのURIは、一般的に /api/v1/resource のように、他のリソースと区別するために /api/ プレフィックスを付ける（前述のCORS設定の例のように）。
認証/認可: 認証には、セッション管理（Spring Securityのデフォルト）または**JWT（JSON Web Token）**を使用する。

4. まとめ：連携のための橋渡し

モダンなWeb開発において、Spring Bootはデータの提供とビジネスロジックの実行に専念し、フロントエンドはユーザーインターフェースに専念するという役割分担が主流です。CORS設定は、この2つの層を安全に接続するための「橋渡し」の役割を果たします。

✅ 本日のまとめ

SPA（Single Page Application）では、バックエンド（Spring Boot）はJSONデータを返すAPIサーバーに徹する。
**CORS（Cross-Origin Resource Sharing）**は、異なるオリジン（ドメイン、ポートなど）間でのAjax通信をブラウザのセキュリティ制限から解放するための仕組みである。
Spring Bootでは、WebMvcConfigurer を実装した設定クラスで addCorsMappings をオーバーライドするか、@CrossOrigin アノテーションを使うことでCORSを有効化できる。
CORS設定では、許可するオリジンとHTTPメソッドを適切に指定することがセキュリティ上重要である。