Goで作成したAPIにReactでPOSTしたい

Question

やりたいこと

Goの勉強でTodoアプリを作成しています。
ReactでPOSTリクエストしたデータをGoで読み込みたいです。

実装

Go サーバーサイド

コード
package todos

import (
	"database/sql"
	"encoding/json"
	"fmt"
	"io/ioutil"
	"log"
	"net/http"
	"os"
	"strings"
	"time"
	"todo-app/auth"

	"github.com/joho/godotenv"
)

type Todo struct {
	// UserID    int       `json:"userid"`
	Todo      string    `json:"todo"`
	CreatedAt time.Time `json:"createdat"`
	UpdatedAt time.Time `json:"updatedat"`
}

type TodoBody struct {
	Todo string `json:"todo"`
}

func CreateTodo(w http.ResponseWriter, r *http.Request) {
	w.Header().Set("Content-Type", "*")
	w.Header().Set("Access-Control-Allow-Origin", "http://localhost:3000")
	w.Header().Set("Access-Control-Allow-Credentials", "true")
	w.Header().Set("Access-Control-Allow-Headers", "*")

	e := godotenv.Load()
	if e != nil {
		log.Fatal(e)
	}
	dbConnectionInfo := fmt.Sprintf("%s:%s@tcp(127.0.0.1:3306)/go_todo", os.Getenv("DB_USER"), os.Getenv("DB_PASSWORD"))
	db, err := sql.Open("mysql", dbConnectionInfo)
	if err != nil {
		log.Fatal(err)
	}
	defer db.Close()

	body, err := ioutil.ReadAll(r.Body)
	if err != nil {
		log.Fatal(err)

	}

	log.Printf("request body=%s\n", body)

	var data TodoBody

	if err := json.Unmarshal(body, &data); err != nil {
		log.Println(err)
	}

	// userId := 12
	todo := data.Todo

	todoData := Todo{todo, time.Now(), time.Now()}

	tokenString := r.Header.Get("Authorization")
	tokenString = strings.TrimPrefix(tokenString, "Bearer ")

	log.Printf("request token=%s\n", tokenString)

	_, err2 := auth.TokenVerify(tokenString)
	if err2 != nil {
		log.Fatal(err)
	} else {

		stmt, err := db.Prepare("INSERT INTO todos (Todo,CreatedAt,UpdatedAt) VALUES(?,?,?)")
		if err != nil {
			log.Fatal(err)
		}

		_, err = stmt.Exec(todoData.Todo, todoData.CreatedAt, todoData.UpdatedAt)
		if err != nil {
			log.Fatal(err)
		}

		json.NewEncoder(w).Encode(todoData)
	}
}

React フロントエンド

import { useState } from "react";
import { useCreateTodo } from "../../hooks/useCreateTodo";
import { BaseButton } from "../atoms/baseButton";
import { TextArea } from "../atoms/textArea";

export const AddTodo = () => {
  const [text, setText] = useState("");
  const CreateTodo = useCreateTodo();
  const token = "Bearer " + sessionStorage.getItem("token");

  const onClickCreate = () => {
    CreateTodo(token, text);
  };

  return (
    <div>
      <TextArea
        onChange={(e: any) => setText(e.target.value)}
        defaultValue=""
      />

      <BaseButton text="タスクを追加" onClick={onClickCreate} />
    </div>
  );
};

ここでPOSTしています↓

import axios from "axios";

export const useCreateTodo = () => {
  const URL = "http://127.0.0.1:8080/createtodo";

  const CreateTodo = async (token: string, todo: any) => {
    const data = { todo: todo };
    console.log(data);

    await axios
      .post(URL, JSON.stringify(data), { headers: { Authorization: token } })
      .then((res) => console.log(res))
      .catch((err) => console.log(err));
  };

  return CreateTodo;
};

POSTする際にheaderをつけなければGoのioutil.ReadAll(r.Body)に正しい値が来ていますが、headerを加えると値がとれなくなります。
Advanced REST clientでGoのAPIをたたいた際にはheaderの情報があっても正しく処理されているので、POSTの仕方に問題があるかと考えていますが、なかなか解決することができません。ブラウザのコンソールにはこちらが表示されています。 POST http://127.0.0.1:8080/createtodo net::ERR_CONNECTION_RESET
お力を貸していただけたら幸いです。よろしくお願いします。

Comments

[hoshi-takanori]

ブラウザのコンソールに何か出てますか？

[takeya60]

ブラウザのコンソールにはこちらが表示されています。
POST http://127.0.0.1:8080/createtodo net::ERR_CONNECTION_RESET

[hoshi-takanori]

サーバーが log.Fatal で落ちてるとか？

Answer 1

フロントエンドとGoバックエンドが「ホストまたはポート」が異なるところから提供されている場合、
クロスオリジンリソース共有（CORS）対応が求められると思いますが、
Go側にその対応を入れているのが

	w.Header().Set("Access-Control-Allow-Origin", "http://localhost:3000")

これだけのように見えます。

ブラウザはセキュアなクロスオリジンなAPIアクセスにおいて、サーバーやクライアントの許可ヘッダーを確認しようとします。

クライアントに特に許可ヘッダーがない場合、
プリフライトチェックという「OPTIONS」メソッドによるリクエスト・レスポンスのやり取りを先行して行おうとします。ここでエラーがあると、サーバーだけ許可ヘッダーがあっても切断される場合があるかもしれません。

解決案１：
クライアントに全許可を入れる方法

axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';

解決案２：
サーバー側にOPTIONS応答を返す実装を追加する。

実装例：

	w.Header().Set("Access-Control-Allow-Origin", "http://localhost:3000")
	switch r.Method {
	case "OPTIONS":
		w.Header().Set("Access-Control-Allow-Headers", "access-control-allow-methods,access-control-allow-origin")
		w.Header().Set("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
		return
	}
	// 通常の応答実装

Comments

[nobonobo]

もちろん解決案１を公の場に使うのはやめましょう。セキュリティ的に狙われやすくなる可能性を増やしてしまいます。

[takeya60]

解答ありがとうございます。解決策1を試してみましたが、同じ現象が発生してしまいます。
解決策2について調べてみようと思います。

[nobonobo]

解決案１はもう使えなくなってますね。（ブラウザがよりセキュアに改良された？）
案２の実装例を追記しました。

[takeya60]

実装例をコードに追加したら想定通りに動きました！追記していただきとても助かりました。
ありがとうございます。