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

Question

前提・実現したいこと

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)

該当のソースコード

import axios from 'axios';
import { makeUseAxios } from 'axios-hooks'

const axiosInstance = axios.create({
  baseURL: 'http://localhost:8080',
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json;charset=utf-8',
    'Accept': 'application/json',
  }
});
export const useAxios = makeUseAxios({
  axios: axiosInstance,
  cache:false
});

// 上記useAxiosをインポート
const [{ data, loading, error }, fetch] = useAxios({}, { manual: true, useCache: false });

//　送信処理
const postData = async () => {
    const res = await fetch({url: 'data', method: 'POST', data: {text: 'text'}, headers: {'X-CSRF-Token': 'xxxxxxxxxxx'})
    );

    if (res.status === 200) {
    }
  };

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

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

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

Comments

[hoshi-takanori]

axios 使ってない (代わりに fetch を使ってる) ように見えますけど…。

[退会済みユーザー]

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

Answer 1

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

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