未分類

CORS設定ってなに？？

Spring×Next.js_サムネイル

CORS（Cross-Origin Resource Sharing） とは、異なるオリジン（ドメイン）間でリソースをやり取りする際のセキュリティ制限 を指します。

1. CORS が必要な理由

ブラウザは 同一オリジンポリシー（Same-Origin Policy）という制約を持っていて、基本的に 異なるドメイン間のリクエストをブロック します。
例えば、フロントエンド（Next.js）とバックエンド（Spring Boot）が以下のように別のドメインの場合、ブラウザはデフォルトでリクエストを拒否してしまう。

  • Next.js（フロントエンド） → http://localhost:3000
  • Spring Boot（バックエンド） → http://localhost:8080
fetch("http://localhost:8080/api/users")
 .then((res) => res.json())
 .then((data) => console.log(data));
TSX

このままだとエラーになる！

2. CORS エラーの発生例

Next.js のブラウザコンソールで以下のようなエラーが出ます。

Access to fetch at 'http://localhost:8080/api/users' from origin 'http://localhost:3000' has been blocked by CORS policy.
SQL

これは、ブラウザが 「別のオリジン（ポートが違う）」 という理由でリクエストをブロックしているため。

3. CORS を許可する方法（Spring Boot 側）

方法①: @CrossOrigin を使う（簡単）

特定の API だけ CORS を許可する場合は、@CrossOrigin を @RestController のクラスやメソッドに追加します。

@RestController
@RequestMapping("/api/users")
@CrossOrigin(origins = "http://localhost:3000") // Next.js のURLを許可
public class UserController {
    @GetMapping
    public List<User> getUsers() {
        return List.of(new User(1, "Alice"), new User(2, "Bob"));
    }
}
Java

→ これで Next.js から API にアクセスできる！

方法②: WebMvcConfigurer を使う（全体適用）

全 API に CORS 設定を適用する場合は、Spring Boot の WebMvcConfigurer を使います。

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/**") // すべての API に適用
                        .allowedOrigins("http://localhost:3000") // Next.js のURLを許可
                        .allowedMethods("GET", "POST", "PUT", "DELETE") // 許可する HTTP メソッド
                        .allowCredentials(true);
            }
        };
    }
}
Java

→ これで Next.js から Spring Boot のすべての API にアクセス可能！

4. 本番環境での注意

ローカル (localhost:3000 → localhost:8080) の開発時は問題ないですが、本番環境では セキュリティのために CORS を適切に設定 する必要があります。
例えば、allowedOrigins("*") で全てのオリジンを許可すると セキュリティリスク があります。

例: 本番環境の CORS 設定

registry.addMapping("/api/**")
        .allowedOrigins("https://my-nextjs-app.com") // 具体的なフロントエンドURLのみ許可
        .allowedMethods("GET", "POST");
Java

→ 本番では * ではなく、許可するドメインを指定するのが安全！

5. 結論

  • CORS は異なるオリジン間の通信を制御する仕組み
  • Next.js（http://localhost:3000）から Spring Boot（http://localhost:8080）へ API リクエストすると、デフォルトでブロックされる
  • Spring Boot 側で @CrossOrigin または WebMvcConfigurer を使って許可する必要がある
  • 本番環境ではセキュリティを考慮して、特定のオリジンのみ許可する

これで Next.js から Spring Boot に安全にアクセスできます！

カテゴリー