SpringBootアプリケーションでHTTPステータス413エラーが発生した際の対処法

 エラー Status code: 413 と Access-Control-Allow-Origin が出ている場合、2つの問題が混在しています：

---

✅ エラーの原因まとめ

1. 413 Payload Too Large

これは アップロードしようとしている画像がサーバー側の受け入れサイズ上限を超えている ことを意味します。

対応方法（Spring Boot 側）:

# application.properties または application.yml に追加
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB

上記で 10MB に制限を拡張。必要に応じてもっと大きく設定してください。

---

2. Access-Control-Allow-Origin エラー（CORS問題）

これは React（フロント）と Spring Boot（バックエンド）のドメインが異なるため、CORS（クロスオリジン）でブロックされています。

対応方法（Spring Boot 側）:

@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")
                .allowedHeaders("*");
    }
}

または、コントローラー単位で指定も可能：

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

---

🚀 解決手順まとめ

1. application.properties に以下を追加：

spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB

2. @CrossOrigin または WebMvcConfigurer を追加して CORS を許可。

3. React 側でリクエストを送るときのURLとポートが正しいことも確認：

axios.post('http://localhost:8080/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' },
});