📝

CORS認証について

2024/10/16に公開

-SpringBoot+React(フォルダを分けて通信する際)

CORSの設定は、フロントエンドとバックエンドが異なるドメインで動作しているときに、データのリクエストが許可されるようにするために必要
→ブラウザがセキュリティの観点から、ユーザーのデータやリソースが不正にアクセスされないようにするために行うもの

package com.example.samplelogin.config;

import org.springframework.context.annotation.Bean;
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 {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                        .allowedOrigins("http://localhost:3000")
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowedHeaders("*")
                        .allowCredentials(true);
            }
        };
    }
}

-解説
return new WebMvcConfigurer() の部分は、Spring BootでCORSなどのWeb MVC設定をカスタマイズするために、WebMvcConfigurer インターフェースの匿名クラスを作成して返す部分
→なぜ匿名クラスを使うのか?
匿名クラスを使うことで、WebMvcConfigurer を新たにクラスとして定義する必要なく、必要なメソッドを実装してすぐにインスタンス化できる

➀@Configuration アノテーション:

Springで設定クラスであることを示している。このクラスはアプリケーションの設定に使用される

➁addCorsMappings メソッド:

CorsRegistry registry: CORS設定を登録するためのオブジェクト

registry.addMapping("/api/**"):
/api/で始まる全てのリクエストパスにCORSの設定を適用

allowedOrigins("http://localhost:3000"):
この設定により、http://localhost:3000からのリクエストが許可

allowedMethods("GET", "POST", "PUT", "DELETE"):
許可されるHTTPメソッドを指定している。ここではGET, POST, PUT, DELETEメソッドが許可

allowedHeaders("*"):
全てのHTTPヘッダーを許可→特定のヘッダーの場合はその名前を指定する

allowCredentials(true):
クライアントが認証情報(クッキーやHTTP認証など)を含むリクエストを送信できるように

-まとめ
この設定は、異なるオリジン(ドメイン、ポート、またはプロトコルが異なる場合)間でリソースを共有する際にCORSエラーを防ぐためのもの
具体的には、Reactアプリがhttp://localhost:3000からバックエンドAPIにリクエストを送る際に、CORS設定をしておかないとエラーが発生してしまう

Discussion