新人と先輩の会話形式で理解しよう

新人

「先輩、Springアプリでフロントとバックエンドを分けたら、なんかエラーが出るんですけど……」

先輩

「それはもしかして、CORSに関するエラーかもしれないね。画面に“Access-Control-Allow-Origin”って出てなかった？」

新人

「あ、それです！CORSってなんですか？設定しないとどうなるんですか？」

先輩

「いい質問だね。じゃあ今回は、CORS設定の意味や必要性、それとSpringでの設定方法を一緒に学んでいこう！」

1. CORSとは何か？

まず、CORS（コース：Cross-Origin Resource Sharing）とは、あるオリジン（ドメイン）から別のオリジンのリソースにアクセスしようとするときに、ブラウザが制御するセキュリティ機能のことです。

たとえば、http://localhost:3000のフロントエンドアプリが、http://localhost:8080のSpring Bootアプリにリクエストを送る場合、オリジンが異なるため、ブラウザが自動的にブロックします。

このような制限があることで、悪意のあるWebサイトからの勝手なアクセスを防ぎ、セキュリティを保つ役割を果たしているのです。

2. なぜCORS設定が必要なのか？

JavaでWebアプリケーションを開発していると、フロントとサーバーを別々のポートやドメインで動かすことがよくあります。そのときにCORSエラーが発生すると、フロント側からのリクエストが通らなくなってしまいます。

以下のようなエラーがブラウザの開発者ツールに表示されることがあります。


Access to XMLHttpRequest at 'http://localhost:8080/api/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

このようなCORSポリシーによる制限を緩和するには、サーバー側で明示的に「このオリジンからのアクセスを許可します」と設定する必要があります。

Spring Bootでは、WebMvcConfigurerというインターフェースを使って、柔軟にCORS設定を行うことができます。

設定を行わないままだと、正しく実装していてもデータが取得できないという状況になってしまうため、初心者の方ほど最初に覚えておくべき重要なポイントです。

さらに、セキュリティの観点でもCORSは非常に重要です。例えば、信頼できるオリジンだけを許可することで、不正アクセスを防ぎ、システムの安全性を高めることができます。

それでは次のステップでは、Spring Securityとの関係や、実際にどうやってWebMvcConfigurerでCORSを設定するかを具体的に見ていきましょう。

3. Spring Securityとの関係：CORSがブロックされる原因

Spring BootでCORS設定を行ったにもかかわらず、うまく反映されないというケースがよくあります。その大きな原因の一つが、Spring Securityによる影響です。

Spring Securityはセキュリティ強化のため、デフォルトでCORSをブロックする動作が含まれています。つまり、単にWebMvcConfigurerでCORSを許可しても、Spring Security側でも同様の許可をしないと反映されません。

そのため、CORS設定を行う際には、以下の2つのポイントを押さえておく必要があります。

① WebMvcConfigurerでCORSの定義をする
② Spring Security側でもCORSを有効にする

このように、Spring Securityがプロジェクトに含まれている場合は、二重の設定が必要になるという点に注意してください。

4. WebMvcConfigurerとは何か？（役割と使い方）

WebMvcConfigurerは、Spring MVCの設定をカスタマイズできるインターフェースです。CORSの設定だけでなく、フォーマッタ、インターセプタ、ビューリゾルバなども設定できます。

今回はこの中でもCORS設定に関するメソッドを使用します。具体的には、addCorsMappingsメソッドをオーバーライドして、対象のURLに対してどのオリジンからのリクエストを許可するかを設定します。

以下に基本的な使い方の例を示します。


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("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowCredentials(true);
    }
}

上記のコードでは、すべてのパス（/**）に対して、http://localhost:3000からのリクエストを許可しています。

また、HTTPメソッドも制限付きで許可することができます。「すべてを許可する」よりも、必要なメソッドだけを許可することで、セキュリティ面でも安全性が向上します。

5. CORSを許可するための設定手順（全体の流れ）

Spring Boot + Spring Security構成でCORSを正しく動作させるには、以下の手順で設定を行います。

① WebMvcConfigurerでCORS設定を追加する
② Spring Securityの設定クラスでCORSを有効化する
③ コントローラ側は@Controllerを使用する

まず①の設定は前述のとおり、addCorsMappingsで定義します。そして、②のSpring Securityの設定には下記のように書きます。


import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.web.SecurityFilterChain;
import org.springframework.context.annotation.Bean;

@Configuration
public class SecurityConfig {

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
            .cors()  // CORSを有効にする
            .and()
            .csrf().disable()
            .authorizeHttpRequests(auth -> auth
                .anyRequest().permitAll()
            );
        return http.build();
    }
}

この設定によって、Spring SecurityのフィルタでCORSを有効化しつつ、認証などの処理を後回しにできます。

また、@Controllerで定義する画面系のハンドラも、CORS設定の影響を受けるため、正確にCORSを制御しておくことが大切です。

以上のように、Spring SecurityとWebMvcConfigurerを連携させることで、クロスオリジンリクエストを安全に制御できます。

このCORS設定は、特にReactやVueなど、フロントエンドとバックエンドを分離した構成を取るプロジェクトでは、最初に必ず対応すべきポイントです。

次のセクションでは、@Controllerを使った具体的な実装例や、うまくいかないときの原因についても解説していきます。

6. CORS設定を使った実装例（@Controllerを使ったサンプル）

それでは、実際に@Controllerを使って、CORS設定が有効なサーバーを構築してみましょう。今回は、簡単な画面表示とAPIエンドポイントを用意します。

まずは、WebMvcConfigurerとSpring Securityの設定が完了している前提で、画面を表示するための@Controllerクラスを作成します。


import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {

    @GetMapping("/")
    public String index(Model model) {
        model.addAttribute("message", "CORS設定が有効です！");
        return "index";
    }
}

このHomeControllerは、ルートパスにアクセスしたときにindex.htmlを返すだけのシンプルな構成です。実際にはこの画面に、JavaScriptでフロントエンドから別ポートにあるSpringアプリへリクエストを送る構成が一般的です。

そして、WebMvcConfigurerとSecurityConfigの設定が正しく行われていれば、CORSの制限に引っかからずリクエストを処理できます。

これにより、ReactやVueなどのSPAフレームワークとも安全に連携が可能になります。

7. よくある間違いや注意点（設定しても効かない原因など）

実際にCORS設定を行っても、「設定が反映されない」「相変わらずCORSエラーになる」という問題に直面する方も多いです。ここでは、よくある原因とその対処法をまとめます。

① Spring Security側でcors()を有効にしていない

WebMvcConfigurerだけでCORS設定を行っても、Spring Security側でhttp.cors()の記述がなければ意味がありません。必ずSecurityConfig内にcors()の記述があるか確認してください。

② allowedOriginsに正しいURLが設定されていない

許可するオリジンは完全一致が必要です。http://localhost:3000で動作しているフロントエンドに対応させたい場合、ポート番号まで正しく指定する必要があります。

③ フロント側のリクエスト設定ミス

JavaScriptでFetch APIやAxiosを使ってリクエストを送るときに、credentials: 'include'を指定している場合は、サーバー側もallowCredentials(true)の設定が必要です。この指定がないと、CORSの検証で失敗します。

④ HTTPメソッドやヘッダーの制限

許可していないメソッド（PUTやDELETEなど）や、カスタムヘッダーを使っている場合も注意が必要です。allowedMethodsやallowedHeadersで適切に指定しましょう。

⑤ キャッシュが残っている

設定を変更したのに反映されない場合は、ブラウザのキャッシュやプリフライトリクエストのキャッシュが原因の可能性もあります。必ずブラウザを再読み込みするか、キャッシュを無効にして確認しましょう。

8. CORS設定が有効になっているかの確認方法（ブラウザ・ログでの確認）

CORS設定が正しく動作しているかどうかを確認するには、いくつかの方法があります。ここでは初心者でも実践できる手順を紹介します。

① ブラウザの開発者ツールで確認

Google ChromeやFirefoxの開発者ツールを開き、「ネットワーク」タブでリクエストを確認します。レスポンスヘッダーにAccess-Control-Allow-Originが含まれていれば、CORS設定は成功しています。


Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Credentials: true

また、失敗している場合は「CORS policy」に関するエラーが「コンソール」タブに表示されます。

② サーバーログで確認

Spring Bootを起動しているターミナルに出力されるログをチェックすることも有効です。CORSエラーが発生していると、拒否されたリクエストの情報が表示されることがあります。

③ curlコマンドで確認

ターミナルからcurlを使ってCORSヘッダーの確認も可能です。


curl -i -H "Origin: http://localhost:3000" http://localhost:8080/

実行後のレスポンスヘッダーにAccess-Control-Allow-Originが含まれていれば、CORS設定は成功しています。

このように、開発中にCORS設定の確認を習慣づけることで、不具合の早期発見やセキュリティ上の問題を防ぐことができます。

最後にもう一度重要なポイントを整理すると、CORS設定には以下の3つの視点が大切です。

✅ WebMvcConfigurerで明示的に許可する
✅ Spring Securityの設定でCORSを有効化する
✅ ブラウザやログで確実に確認する

この3点を守って実装すれば、CORSによる通信エラーに悩まされることなく、フロントエンドと安全に連携するWebアプリケーションを構築できます。

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

CORSとは何ですか？Web開発でなぜ必要になるのですか？

CORSはCross-Origin Resource Sharingの略で、異なるドメインやポート間でアクセスを制御するWebブラウザのセキュリティ機能です。例えばフロントエンドがlocalhost:3000、バックエンドがlocalhost:8080で動いている場合、CORS設定を行わないとリクエストがブロックされます。

WebMvcConfigurerを使ったCORSの設定を完全ガイド！初心者でも理解できるセキュリティ対策