CORSに関するエラー

エラー内容

Access to XMLHttpRequest at 'http://localhost:8080/todos/create'
from origin 'http://{IP}' has been blocked by CORS policy

翻訳

🗣️「おい、フロントは http://{ElasticIP} から来てるのに、バックエンド（API）は http://localhost:8080 にあるじゃん？
でもCORS（クロスオリジン）対策されてねーからブロックするわ！」

捕捉

• オリジン
  • スキーム＋ホスト＋ポート番号で定義
    • http://example.com/app1/index.html
    • http://example.com/app2/index.html
• 上記の場合は、ファイルパスのみ異なるので同一オリジン
• 参照: https://developer.mozilla.org/ja/docs/Glossary/Origin

バックエンドにCORS設定を追加

• @Configuration クラスに許可してよいオリジンを追記する

コード例（※開発環境）

@Configuration
public class WebConfig {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**") // 全エンドポイントに適用
                        .allowedOrigins("http://HOSTNAME") // 許可するオリジン
                        .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // OPTIONSも含む
                        .allowedHeaders("*")
                        .allowCredentials(true);
            }
        };
    }
}