GoのAPIにReactのAxiosでアクセスするとエラーになる

はじめに

この記事は2022年9月にまとめていた「細かいつまずいたことをメモしておく(9月編)をそれぞれ投稿した内容になります
解決方法が最新でない可能性もありますのでご了承ください

問題

Goで作成したユーザー一覧をJSONで返すAPIにReactでAxiosを使ってアクセスするとエラーになってしまった

解決方法

CROS?という方は以下の動画をまずみましょう

ここではginを利用している場合の解決策を載せる
原因はGo側にあるのでReactの立っているlocalhost:3000からのアクセスを許可するように設定してあげたらアクセスができた

main.go

func main() {
	r := gin.Default()

	r.Use(cors.New(cors.Config{
    AllowOrigins: []string{
        'http://localhost:3000',
    },
    // アクセスを許可したいHTTPメソッド(以下の例だとPUTやDELETEはアクセスできません)
    AllowMethods: []string{
        "POST",
        "GET",
        "OPTIONS",
    },
  }))

(省略)

AllowMethodsも追加しないとエラーが発生するので追加しています

またcorsをgo getで入れる必要がある

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

参考