GinでCORS設定を簡単に導入！corsミドルウェアの基本と実践的な使い方

はじめに

API開発をしていると、クライアント（ブラウザ）とサーバー間でクロスオリジンリクエスト（CORS: Cross-Origin Resource Sharing）に遭遇することがあります。CORSを適切に設定しないと、フロントエンドからAPIを呼び出す際に「Access-Control-Allow-Origin」エラーが発生します。

本記事では、Ginフレームワークを使ったCORSの基本設定から、以下のコードを解説します。

"github.com/gin-contrib/cors"

func corsMiddleware(allowOrigins []string) gin.HandlerFunc {
	config := cors.DefaultConfig()
	config.AllowOrigins = allowOrigins
	return cors.New(config)
}

router.Use(corsMiddleware(configs.Config.APICorsAllowOrigins))

初心者にもわかりやすく、実践的な内容に仕上げています。

CORSとは？

基本的な仕組み

CORSは、ブラウザが異なるオリジン（ドメイン、プロトコル、ポートが異なるリソース）間のリクエストを制御するための仕組みです。

例：

• フロントエンド: http://localhost:3000
• バックエンド: http://localhost:8080

上記のように、ポートが異なる場合も「異なるオリジン」と見なされ、CORS設定が必要になります。

CORSを設定しない場合のエラー例

フロントエンドからバックエンドAPIを呼び出すと、以下のようなエラーが発生することがあります。

Access to XMLHttpRequest at 'http://localhost:8080/api' from origin 'http://localhost:3000' has been blocked by CORS policy

これは、バックエンドが特定のオリジンからのリクエストを許可していないためです。

GinでCORSを設定する方法

必要なパッケージ

Ginフレームワークでは、公式のCORS対応ライブラリgithub.com/gin-contrib/corsを利用できます。このライブラリを使うと、簡単にCORS設定ができます。

以下のコマンドでパッケージをインストールします：

go get -u github.com/gin-contrib/cors

コードの詳細な解説

以下のコードを見ていきます。

CORSミドルウェアの定義

func corsMiddleware(allowOrigins []string) gin.HandlerFunc {
	config := cors.DefaultConfig() // デフォルト設定を作成
	config.AllowOrigins = allowOrigins // 許可するオリジンを設定
	return cors.New(config) // 設定を元にCORSミドルウェアを生成
}

• cors.DefaultConfig()
  • デフォルトのCORS設定を作成します。
  • デフォルトではすべてのオリジンが拒否されるため、明示的に許可するオリジンを設定する必要があります。
• config.AllowOrigins = allowOrigins
  • 許可するオリジンのリストを設定します。
  • allowOriginsはスライス形式（[]string）で渡され、例えば以下のように設定できます：

allowOrigins := []string{"http://localhost:3000", "https://example.com"}

• cors.New(config)
  • 上記で作成した設定を使い、新しいCORSミドルウェアを生成します。
  • これがGinのミドルウェアとして使用可能な形式（gin.HandlerFunc）を返します。

router.Useでミドルウェアを適用

router.Use(corsMiddleware(configs.Config.APICorsAllowOrigins))

• GinのルーターにCORSミドルウェアを適用します。
• configs.Config.APICorsAllowOriginsは、許可するオリジンを定義したアプリケーションの設定値です。このように外部設定から動的に許可リストを管理するのが一般的です。

ちなみに以下のように設定しています。

Config = ConfigList{
	APICorsAllowOrigins: []string{"http://0.0.0.0:8001"},
}

まとめ

この記事では、Ginを使ったCORS設定の基本と、その実装方法を解説しました。

この記事のポイント

• CORSの基本的な仕組みを理解する。
• GinでCORSミドルウェアを簡単に導入する方法を学ぶ。
• 外部設定（動的なオリジン許可リスト）の活用例を知る。

CORSエラーで悩んでいる方は、ぜひこの記事を参考にしてみてください。これでスムーズにAPIをフロントエンドから利用できるようになるはずです！