簡単！CORSの設定

バックエンドにリクエストを送れないのはCORS設定できてないからかもしれない

例えばReact + Goで開発をしているとします。Reactlocalhost:8000でGoはlocalhost:8080で動いているとします。

ReactからGoへリクエストを投げてみます。すると次のエラーが出ます。

オリジンが異なるときはCORSの設定が必要

エラーの原因はReactとGoでオリジンが違うことです。今回の場合で言うと

React：http://localhost:8000
Go：http://localhost:8080

がオリジンです。

違うオリジンにリクエストを送るにはCORS(Cross-Origin Resource Sharing)の設定が必要です。

具体的にはフロントエンド側でモードの設定、バックエンド側でヘッダーを付与する必要があります。

モードの設定

クロスオリジンリクエストであることを指定します。クッキーを送信する場合は
credentials: "include"とします。

fetch("http://localhost:8080/ping", {
      mode: "cors",  // クロスオリジンリクエストであることを指定
      credentials: "include",
    })

ヘッダーを付与

Access-Control-Allow-Headers...許可するヘッダー

Access-Control-Allow-Origin...許可するOrigin

Access-Control-Allow-Methods...許可するメソッド

Access-Control-Allow-Credentials...クッキーを使うかどうか

今回はこのような感じで設定しました。

func ForCORS(next http.Handler) http.Handler {
	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
		w.Header().Set("Access-Control-Allow-Headers", "*")
		w.Header().Set("Access-Control-Allow-Origin", "http://localhost:8000")
		w.Header().Set("Access-Control-Allow-Methods", "GET, POST, PUT, OPTIONS")
		w.Header().Set("Access-Control-Allow-Credentials", "true")

		if r.Method == "OPTIONS" {
	    	w.WriteHeader(http.StatusOK)
			return
		}
		next.ServeHTTP(w, r)
	})
}

以上の設定で無事、フロントエンドからバックエンドへリクエストを送れるようになりました。