新しくフロントとバックエンドでサービスを作るとなるとバックエンド側でcors設定が必要になります。最初のセットアップで躓いたり、設定し忘れてしまいフロントから修正依頼が来るところだと思います。

今回はginでcors設定したサンプルを置いておくのでぜひご活用ください！


## サンプルコード
![img](/mosaic-code.jpg)

## ポイント
- 本番とそれ以外ではきちんと`AllowOrigins`を設定し分けること
  - ちゃんとアクセス元を制限させましょう
- AllowHeadersにはリクエスト認証に利用する`Authorization`もしっかり設定しましょう
- AllowMethodsには必要になるHTTPメソッドを設定します

以上、きちんとアクセス制限をしつつ、開発に支障ないようなcors設定を紹介しました。

新しくフロントとバックエンドでサービスを作るとなるとバックエンド側でcors設定が必要になります。最初のセットアップで躓いたり、設定し忘れてしまいフロントから修正依頼が来るところだと思います。

今回はginでcors設定したサンプルを置いておくのでぜひご活用ください！


## サンプルコード
```go
package main

import (
	"os"
	"time"
)

func main() {
	// ginのEngineを取得
	router := gin.Default()
	// ping
	router.GET("/ping", func(c *gin.Context) {
		c.JSON(200, gin.H{
			"message": "ping",
		})
	})

	env := os.Getenv("ENV_NAME")
	allowOrigins := ""
	if env == "prd" {
		allowOrigins = []string{
			"https://i-ssue.com/", // 本番環境
		}
	} else {
		allowOrigins = []string{
			"http://localhost:3000", // ローカル開発環境
			"https://dev~",          // stg環境
		}
	}

	// cors設定の適用
	router.Use(cors.New(cors.Config{
		// アクセスを許可したいアクセス元
		AllowOrigins: allowOrigins,

		// アクセスを許可したいHTTPメソッド
		AllowMethods: []string{"GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"},

		// 許可したいHTTPリクエストヘッダ
		AllowHeaders: []string{"Access-Control-Allow-Headers", "Content-Length", "Content-Type", "Authorization"},

		// cookieなどの認証情報を含めるか否か(通常デフォルトfalseなので合わせました)
		AllowCredentials: false,

		// プリフライトリクエストのキャッシュ時間
		MaxAge: 12 * time.Hour,
	}))

	// 各種APIのエンドポイント設定
	v1 := router.Group("/v1")
	v1.GET("/cors_test", func(c *gin.Context) {
		c.JSON(200, gin.H{
			"message": "OK",
		})
	})
}
```

## ポイント
- 本番とそれ以外ではきちんと`AllowOrigins`を設定し分けること
  - ちゃんとアクセス元を制限させましょう
- AllowHeadersにはリクエスト認証に利用する`Authorization`もしっかり設定しましょう
- AllowMethodsには必要になるHTTPメソッドを設定します

以上、きちんとアクセス制限をしつつ、開発に支障ないようなcors設定を紹介しました。

サンプルコード

ポイント

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