やりたいこと
Goの勉強でTodoアプリを作成しています。
ReactでPOSTリクエストしたデータをGoで読み込みたいです。
実装
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 フロントエンド
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しています↓
React
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
お力を貸していただけたら幸いです。よろしくお願いします。
まだ回答がついていません
会員登録して回答してみよう