@erenyaaayger (izuku midoriya)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

Golangで作ったJSON APIをReactのaxiosで利用したい

Q&A

Closed

解決したいこと

Golangでローカルサーバ上に作成したJSON APIをReactのaxiosで利用したい。

Golangのhttpパッケージを使用して、DBから取得したデータをjson形式に変換し
http://localhost/~
で検索し画面上では正しくJSONが表示されました。
codeSnadBoxを用いてフロント側を作成しており、axiosで当該JSONを取得しようとしたところ、
下記のエラーがでてしまいました。

発生している問題・エラー

   XMLHttpRequest.handleError で ( https://8r846h.csb.app/~~~ )

自分で試したこと

調べてみるとCROSが関係がありそうだったのので下記の通り対応をしてみましたが、解決しませんでした。

$ go get github.com/gin-contrib/cors
func main() {
	r := gin.Default()

	r.Use(cors.New(cors.Config{
    AllowOrigins: []string{
        'http://localhost:3000',
    },
    
    AllowMethods: []string{
        "POST",
        "GET",
        "OPTIONS",
    },
  }))

どうか、ご教示いただけますと幸いです。

0 likes

1Answer

CORSのAllow-Originは接続元となるフロントエンドのオリジンを指定するフィールドであって,バックエンド自身のアドレスを指定しても意味がありません.
CORS設定が必要なコードをCodesandboxのようなオンラインサンドボックスで動作させるのは困難です.
フロントエンドをlocalhostの別のポートで開いた上で,それをAllow-Originに設定してください.

1Like

Comments

  1. @erenyaaayger

    Questioner

    コメントありがとうございます。フロントエンドもローカルサーバで立ち上げる必要があるということですね。これまで、一度に2つのサーバを立ち上げる経験がなかったので、どのようにやるか調べたところdockerが登場することがわかりました。Dockerについて学んでから挑戦しようと思います。ありがとうございます。
  2. そのためだけにdockerなんて入れなくてもフロントエンドとバックエンドでportさえ変えれば十分です.

    ついでにプロダクション用にAllow-Originの設定は環境変数を使用する等考慮が必要です.

Your answer might help someone💌