CORSエラー、君は誰だ？

問題の発生

Access to XMLHttpRequest at '${Gin ip Link}' from origin '${Frontend Origin URL}' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

router := gin.Default()
router.Use(cors.New(cors.Config{
    AllowOrigins:     []string{"http://localhost:3000", "http://127.0.0.1:3000"},
    AllowMethods:     []string{"GET", "POST", "PATCH", "PUT", "DELETE"},
    AllowHeaders:     []string{"Origin", "Content-Length", "Content-Type", "Authorization"},
    ExposeHeaders:    []string{"Content-Length"},
}))

問題解決のアプローチ

router.Use(CORS())  // 新たに定義したCORSミドルウェアの使用

...

func CORS() gin.HandlerFunc {
    return func(c *gin.Context) {
        c.Writer.Header().Set("Access-Control-Allow-Origin", "http://localhost:3000")
        // 認証情報を含むリクエストを許可
        c.Writer.Header().Set("Access-Control-Allow-Credentials", "true")
        // 必要なヘッダーを明確に設定
        c.Writer.Header().Set("Access-Control-Allow-Headers", "Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization, accept, origin, Cache-Control, X-Requested-With")
        c.Writer.Header().Set("Access-Control-Allow-Methods", "POST, PATCH, GET, PUT, DELETE, OPTIONS")

        // OPTIONSリクエストに対しては204 No Contentを返す
        if c.Request.Method == "OPTIONS" {
            c.AbortWithStatus(204)
            return
        }

        c.Next()
    }
}

CORSとは？

Origin

https://google.com:80/search?page=1

CORSが必要な理由

同一原産地政策 (Same-Origin Policy)

その他のソースポリシー

まず、ブラウザでのCORSの動作過程について説明します。

1.クライアントからHTTPリクエストのヘッダーにOriginを入れ、転送

2.サーバーは応答ヘッダにAccess-Control-Allow-Originを入れ、クライアントに転送

3.クライアントからの応答を比較し、ブロックの可否を決定します。

CORSの設定方法と注意点

AJAXリクエストにおける認証情報の扱い方

• 通常、AJAXリクエストでは認証情報（クッキー、認証ヘッダー、TLSクライアント証明書など）が自動的に含まれません。

• 認証情報を含むAJAXリクエストを送信するには、特定の設定が必要です。

withCredentialsとcredentials引数の設定

• XMLHttpRequestを使用する場合： withCredentials引数をtrueに設定します。これにより、ブラウザはクロスオリジンリクエストにクッキーや認証ヘッダーを含めるようになります。

• Fetch APIを使用する場合： credentials引数をincludeに設定します。これにより、クロスオリジンリクエストにも認証情報が含まれるようになります。

CORS設定でのオリジン指定の重要性

• 認証情報を含むリクエストをAPIサーバーに送信する場合、サーバーはAccess-Control-Allow-Credentials: trueヘッダーを含む応答を返します。

• クライアントは、このヘッダーが応答に含まれていない場合、リクエストを拒否します。

• セキュリティ上の理由から、APIサーバーでCORS Credentialを許可する場合、オリジンを具体的に指定する必要があります。ワイルドカード（*）は使用できません。

結論