質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Go

Go(golang)は、Googleで開発されたオープンソースのプログラミング言語です。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

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

takeya60
takeya60

総合スコア2

Go

Go(golang)は、Googleで開発されたオープンソースのプログラミング言語です。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0評価

0クリップ

472閲覧

投稿2022/06/22 14:52

編集2022/06/23 14:16

やりたいこと

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
お力を貸していただけたら幸いです。よろしくお願いします。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

hoshi-takanori

2022/06/22 14:59

ブラウザのコンソールに何か出てますか?
hoshi-takanori

2022/06/22 22:23

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

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Go

Go(golang)は、Googleで開発されたオープンソースのプログラミング言語です。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。