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

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

新規登録して質問してみよう
ただいま回答率
85.44%
Echo(フレームワーク)

Echoは、Go言語で作られたフレームワーク。非常に軽量で、小~中規模のアプリ構成を想定した仕様になっています。公式ドキュメントが用意されており、初心者でも始めやすい点が特徴です。

Go

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

React.js

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

Q&A

解決済

1回答

5248閲覧

Reactでaxiosを使ってpost送信するとnet::ERR_EMPTY_RESPONSEが発生してしまう

退会済みユーザー

退会済みユーザー

総合スコア0

Echo(フレームワーク)

Echoは、Go言語で作られたフレームワーク。非常に軽量で、小~中規模のアプリ構成を想定した仕様になっています。公式ドキュメントが用意されており、初心者でも始めやすい点が特徴です。

Go

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

React.js

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

0グッド

0クリップ

投稿2021/11/20 19:00

編集2021/11/22 15:35

前提・実現したいこと

Golang(echo)とReact間でaxiosを使ったpostの送受信を行おうとしています。
golangはdocker上で動作させています。
chromeで送信をすると、net::ERR_EMPTY_RESPONSEとのエラーが表示されてしまい、
サーバーサイドからのレスポンスもありません。
どのように対処したら良いのでしょうか。
GETの場合は問題なく送受信ができています。

####chromeのコンソールに出力された内容

POST http://localhost:8080/xxxxxxxx net::ERR_EMPTY_RESPONSE createError.js:16 Uncaught (in promise) Error: Network Error at createError (createError.js:16) at XMLHttpRequest.handleError (xhr.js:117)

該当のソースコード

js

1import axios from 'axios'; 2import { makeUseAxios } from 'axios-hooks' 3 4const axiosInstance = axios.create({ 5 baseURL: 'http://localhost:8080', 6 withCredentials: true, 7 headers: { 8 'Content-Type': 'application/json;charset=utf-8', 9 'Accept': 'application/json', 10 } 11}); 12export const useAxios = makeUseAxios({ 13 axios: axiosInstance, 14 cache:false 15});

js

1// 上記useAxiosをインポート 2const [{ data, loading, error }, fetch] = useAxios({}, { manual: true, useCache: false }); 3 4// 送信処理 5const postData = async () => { 6 const res = await fetch({url: 'data', method: 'POST', data: {text: 'text'}, headers: {'X-CSRF-Token': 'xxxxxxxxxxx'}) 7 ); 8 9 if (res.status === 200) { 10 } 11 };

go

1// cors設定 2e.Use(middleware.CORSWithConfig(middleware.CORSConfig{ 3 AllowOrigins: []string{"http://localhost:3000"}, 4 AllowMethods: []string{http.MethodGet, http.MethodHead, http.MethodPut, http.MethodPatch, http.MethodPost, http.MethodDelete}, 5 AllowCredentials: true, 6}))

補足情報(FW/ツールのバージョンなど)

go 1.16
echo 4.4.0
react 17.0.2
axios 0.24.0
axios-hooks 2.7.0

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2021/11/21 00:43

axios 使ってない (代わりに fetch を使ってる) ように見えますけど…。
退会済みユーザー

退会済みユーザー

2021/11/22 15:27

コードには記載していませんでしたが、送信ボタンを押すと、clickイベントで割り当てられたpostDataが起動して送信処理を実行しています。任意のタイミングで実行したいので、manual:trueを設定し、fetchで送信をするような形をとっています。
guest

回答1

0

ベストアンサー

マシンのlocalhostとdocker内のlocalhostは別モノです。

docker localhost等で検索して出てくるDockerコンテナ内でlocalhostで起動するアプリに外部から接続する方法等を参考に設定してください。

投稿2021/11/22 11:21

k4a

総合スコア983

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問