# ReactとSpring BootをCORS対応させる設定例

## 目次
1. はじめに
2. CORSの概要
3. ReactでのCORS対応
   1. フロントエンドでの設定
4. Spring BootでのCORS対応
   1. グローバル設定
   2. コントローラーレベルでの設定
5. CORS設定のベストプラクティス
6. まとめ

## 1. はじめに
Webアプリケーションを構築する際、特にフロントエンドとバックエンドを別々に開発している場合に悩まされるのがCORS（Cross-Origin Resource Sharing）です。本記事では、Reactをフロントエンドとして、Spring Bootをバックエンドとして使用する場合のCORS対応例を紹介します。これにより、安全かつ効率的なAPI通信を実現します。

## 2. CORSの概要
CORSは、異なるオリジン間でのリソース共有を許可するための安全機能です。Webブラウザは、セキュリティ上の理由から、異なるオリジンのリソースにアクセスしようとするとリクエストをブロックします。これを適切に設定することで、必要なリソースへのアクセスを許可できます。

## 3. ReactでのCORS対応

### 3.1 フロントエンドでの設定
ReactでCORSを設定する方法の一つとして、開発環境でプロキシを設定してバックエンドAPIへのリクエストをルーティングします。以下は`package.json`での設定例です。

![img](/mosaic-code.jpg)

この設定により、`http://localhost:3000`で動作するReact開発サーバーが、`/api`経由でバックエンドの`http://localhost:8080`にリクエストをプロキシします。

## 4. Spring BootでのCORS対応

### 4.1 グローバル設定
Spring BootでCORSをグローバルに設定するには、`WebMvcConfigurer`インターフェースを実装します。以下はその設定例です。

![img](/mosaic-code.jpg)

### 4.2 コントローラーレベルでの設定
個別のコントローラーに対してCORS設定を行いたい場合は、`@CrossOrigin`アノテーションを使用します。

![img](/mosaic-code.jpg)

## 5. CORS設定のベストプラクティス
- **必要なオリジンのみ許可**: すべてのオリジンを許可するのはセキュリティ上のリスクがあります。必要なオリジンのみを明示的に許可しましょう。
- **適切なHTTPメソッドの指定**: 実際に使用するHTTPメソッドのみを許可することで、予期しないリクエストを防ぎます。

## 6. まとめ
CORSは、クライアントとサーバー間でセキュアな通信を確保するために重要な設定です。ReactとSpring Bootの組み合わせでは、フロントエンドとバックエンドそれぞれで正しく設定を行うことで、開発と運用がスムーズになります。適切なCORS設定を行い、安全なアプリケーションを構築しましょう。 [cv:issue_marketplace_engineer]

# ReactとSpring BootをCORS対応させる設定例

## 目次
1. はじめに
2. CORSの概要
3. ReactでのCORS対応
   1. フロントエンドでの設定
4. Spring BootでのCORS対応
   1. グローバル設定
   2. コントローラーレベルでの設定
5. CORS設定のベストプラクティス
6. まとめ

## 1. はじめに
Webアプリケーションを構築する際、特にフロントエンドとバックエンドを別々に開発している場合に悩まされるのがCORS（Cross-Origin Resource Sharing）です。本記事では、Reactをフロントエンドとして、Spring Bootをバックエンドとして使用する場合のCORS対応例を紹介します。これにより、安全かつ効率的なAPI通信を実現します。

## 2. CORSの概要
CORSは、異なるオリジン間でのリソース共有を許可するための安全機能です。Webブラウザは、セキュリティ上の理由から、異なるオリジンのリソースにアクセスしようとするとリクエストをブロックします。これを適切に設定することで、必要なリソースへのアクセスを許可できます。

## 3. ReactでのCORS対応

### 3.1 フロントエンドでの設定
ReactでCORSを設定する方法の一つとして、開発環境でプロキシを設定してバックエンドAPIへのリクエストをルーティングします。以下は`package.json`での設定例です。

```json
{
  "name": "my-react-app",
  "version": "1.0.0",
  "proxy": "http://localhost:8080", // Spring BootアプリのURL
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  }
}
```

この設定により、`http://localhost:3000`で動作するReact開発サーバーが、`/api`経由でバックエンドの`http://localhost:8080`にリクエストをプロキシします。

## 4. Spring BootでのCORS対応

### 4.1 グローバル設定
Spring BootでCORSをグローバルに設定するには、`WebMvcConfigurer`インターフェースを実装します。以下はその設定例です。

```java
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 implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("http://localhost:3000") // ReactアプリのURL
            .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
            .allowedHeaders("*");
    }
}
```

### 4.2 コントローラーレベルでの設定
個別のコントローラーに対してCORS設定を行いたい場合は、`@CrossOrigin`アノテーションを使用します。

```java
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin(origins = "http://localhost:3000")
public class MyController {

    @GetMapping("/api/data")
    public String getData() {
        return "Hello, World!";
    }
}
```

## 5. CORS設定のベストプラクティス
- **必要なオリジンのみ許可**: すべてのオリジンを許可するのはセキュリティ上のリスクがあります。必要なオリジンのみを明示的に許可しましょう。
- **適切なHTTPメソッドの指定**: 実際に使用するHTTPメソッドのみを許可することで、予期しないリクエストを防ぎます。

## 6. まとめ
CORSは、クライアントとサーバー間でセキュアな通信を確保するために重要な設定です。ReactとSpring Bootの組み合わせでは、フロントエンドとバックエンドそれぞれで正しく設定を行うことで、開発と運用がスムーズになります。適切なCORS設定を行い、安全なアプリケーションを構築しましょう。 

ReactとSpring BootをCORS対応させる設定例

目次

1. はじめに

続きを読むには単価診断を受けてください（30秒）