背景

画面からのAPIアクセス時に403で返却されることがありました。

調べると、CORSが原因だということがわかりました。

CORSとは

CORSとは「Cross-Origin Resource Sharing（クロスオリジン・リソースシェアリング）」の略で、異なるオリジン（ドメイン、プロトコル、ポートが異なる）間でのリソース共有を安全に行うための仕組みです。

Chat-Gptに詳しく聞いてみると。。。

オリジンとは？

オリジンは、URL のプロトコル、ホスト、ポートの組み合わせを指します。たとえば、https://example.com と http://example.com は、プロトコルが異なるため別のオリジンとなります。

なぜCORSが必要か？

Webブラウザは、セキュリティ上の理由から、あるオリジン（例: https://frontend.com）から別のオリジン（例: https://api.backend.com）へのリクエストをデフォルトでは制限しています。これは「同一オリジンポリシー」と呼ばれる仕組みです。 CORS を利用することで、バックエンド側が明示的に「このオリジンからのリクエストは許可する」とブラウザに伝えることができ、クロスオリジンのリクエストを安全に許可することが可能になります。

対処方法

該当の部分です。

func applyCors(r *gin.Engine) {
	r.Use(cors.New(cors.Config{
		AllowOrigins:     []string{"http://localhost:3000"},
		AllowMethods:     []string{"GET", "POST", "PUT", "DELETE", "OPTIONS", "PATCH"},
		AllowHeaders:     []string{"Authorization", "Content-Type"},
		ExposeHeaders:    []string{"Content-Length"},
		AllowCredentials: true,
		MaxAge:           12 * time.Hour,
	}))
golang

以下に変更しました。

ReactのURLが固まってないので、いったん動けば良いということで*にしています。URLが確定したら変更しないと。

func applyCors(r *gin.Engine) {
	r.Use(cors.New(cors.Config{
		AllowOrigins:     []string{"*"},
		AllowMethods:     []string{"GET", "POST", "PUT", "DELETE", "OPTIONS", "PATCH"},
		AllowHeaders:     []string{"Authorization", "Content-Type"},
		ExposeHeaders:    []string{"Content-Length"},
		AllowCredentials: true,
		MaxAge:           12 * time.Hour,
	}))
golang