@CrossOriginの使い方と設定を徹底解説！【初心者向け】

はじめに

こんにちは！今回は、Spring Frameworkでよく使われるアノテーション、@CrossOriginについて解説します。Web開発をしていると、「CORS（Cross-Origin Resource Sharing）」という言葉に直面することが多いです。この記事では、CORSとは何か、そしてその解決策としての@CrossOriginの使い方を詳しく紹介していきます。初心者の方でもわかりやすく理解できるように説明していきますので、ぜひ最後までご覧ください！

@CrossOriginって何？

@CrossOriginとは

「異なるオリジン（ドメイン）からのHTTPリクエストを許可するためのアノテーション」

のことです。

例えば…

あなたのフロントエンドがhttp://localhost:3000で動作している
APIサーバーがhttp://localhost:8080で動作している

このように異なるオリジン間でリクエストを送ると、通常はセキュリティのためにブロックされてしまいます（これが「CORSエラー」です）。これを回避するために使うのが@CrossOriginです。

基本的な使い方

それでは、実際に@CrossOriginを使った簡単な例を見てみましょう。

@RestController
public class MyController {

    @CrossOrigin
    @GetMapping("/hello")
    public String sayHello() {
        return "Hello, World!";
    }
}

このコードでは、http://localhost:3000からhttp://localhost:8080/helloにアクセスしたときに、CORSエラーを回避して「Hello, World!」というメッセージを取得できるようになります。@CrossOriginを付けることで、このエンドポイントが異なるオリジンからのリクエストを許可するようになります。

@CrossOriginの使い方【応用編】

ここからは、@CrossOriginの様々なオプションを活用して、より高度な設定を見ていきましょう。

1. 特定のオリジンのみを許可する

@CrossOrigin(origins = "http://localhost:3000")
@GetMapping("/restricted")
public String restrictedAccess() {
    return "Access granted!";
}

ここでは、http://localhost:3000からのリクエストのみを許可しています。
他のオリジン（例：http://example.com）からのリクエストはブロックされます。

2. 複数のオリジンを許可する

@CrossOrigin(origins = {"http://localhost:3000", "http://example.com"})
@GetMapping("/multiple")
public String allowMultipleOrigins() {
    return "Multiple origins allowed!";
}

複数のオリジンを配列形式で指定できます。

3. 特定のHTTPメソッドを許可する

@CrossOrigin(origins = "*", methods = {RequestMethod.GET, RequestMethod.POST})
@GetMapping("/methods")
public String specificMethods() {
    return "Only GET and POST allowed!";
}

ここでは、GETとPOSTメソッドのみを許可しています。
他のメソッド（例：PUTやDELETE）はブロックされます。

4. リクエストヘッダーを指定する

@CrossOrigin(origins = "*", allowedHeaders = "Authorization")
@GetMapping("/headers")
public String specificHeaders() {
    return "Only Authorization header allowed!";
}

allowedHeadersで、リクエストに含まれる特定のヘッダーだけを許可します。
例えば、APIキーや認証トークンなどの特定のヘッダーを受け入れたい場合に使います。

5. レスポンスヘッダーを設定する

@CrossOrigin(origins = "*", exposedHeaders = "Custom-Header")
@GetMapping("/exposeHeaders")
public String exposeHeaders() {
    return "Custom headers exposed!";
}

クライアントがアクセスできるようにするレスポンスヘッダーを指定します。

@CrossOriginの引数

@CrossOriginには、いくつかの便利なオプションがあります。以下にその詳細をまとめました。

origins: 許可するオリジンのリスト。*を指定するとすべてのオリジンを許可します。
methods: 許可するHTTPメソッド（例：GET, POST, PUT, DELETE）。
allowedHeaders: 許可するリクエストヘッダーのリスト。
exposedHeaders: クライアントがアクセスできるレスポンスヘッダー。
allowCredentials: 認証情報（クッキーや認証ヘッダー）を含めるかどうか。
maxAge: プリフライトリクエスト（OPTIONS）のキャッシュ時間（秒）。

@CrossOriginをグローバルに設定する

すべてのエンドポイントでCORSを有効にしたい場合、WebMvcConfigurerを使って設定できます。

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("GET", "POST")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

これにより、全てのAPIエンドポイントに対してCORS設定が適用されます。

@CrossOriginの強み

1. セキュリティの向上

指定したオリジンやメソッドに制限をかけることで、不正なアクセスを防ぎます。

2. 柔軟な設定

特定のリクエストだけにCORS設定を適用できるため、アプリケーションの要件に合わせて細かく制御できます。

3. 簡単な設定

アノテーションを付けるだけでCORSの問題を解決できるため、初心者にも扱いやすいです。

まとめ

今回は、Springの@CrossOriginアノテーションについて詳しく解説しました。CORSの問題を解決するための強力なツールであり、初心者でも簡単に使いこなせるようになります。WebアプリケーションやAPI開発では欠かせない設定なので、ぜひ実際のプロジェクトで試してみてください！

使いどころ

フロントエンドとバックエンドが異なるオリジンで動作している場合：例えば、React（フロントエンド）とSpring Boot（バックエンド）の連携。
外部APIとの連携：他のドメインからAPIを利用する必要があるとき。
モバイルアプリとの連携：モバイルアプリからのAPIリクエストを許可する場合など。

ぜひ、この機会に@CrossOriginを使ってみてくださいね！もっと詳しく知りたい方は、Spring公式ドキュメントも参考にしてみてください。

これからのアプリケーション開発がもっと楽しくなるはずです！