症状

ローカル環境下で構築したapiをフロントエンドのaxiosで叩こうとしたところ
「error - unhandledRejection: AxiosError: connect ECONNREFUSED 127.0.0.1:5000」というエラーが出てapiを叩けませんでした。

ソースコード

categoryService.ts

import axios from 'axios';

 export  const getCategories = () =>{
	return axios.get(`http://localhost:5000/api/category/all`);
};

axioapi.tsx

import { Category } from "../../types/category";
import * as categoryService from "../../service/categoryService";
import { useState } from "react";

export default function AxiosApi() {

	const [categories, setCategories] = useState<Category[]>([])

	categoryService
		.getCategories()
		.then((response) => {
			//setCategories(response.data)
			console.log(categories[0])
		});


	return (
		<div>
			<h1>axiosを使ったデータ取得</h1>
			カテゴリー名前一覧
			{
				categories.map((category) => {
					return (
						<div key={category.id}>
							{category.name} {category.children}
						</div>
					)
				})
			}
		</div>
	)
}

エラーログ

axioapi.tsxに対応するページを開くとVSCodeのターミナルに以下エラーメッセージが出ます。

error - unhandledRejection: AxiosError: connect ECONNREFUSED 127.0.0.1:5000
    at Function.AxiosError.from (file:///workspaces/ecshop_front_react/ecshop_front/node_modules/axios/lib/core/AxiosError.js:89:14)
    at RedirectableRequest.handleRequestError (file:///workspaces/ecshop_front_react/ecshop_front/node_modules/axios/lib/adapters/http.js:526:25)
    at RedirectableRequest.emit (node:events:513:28)
    at ClientRequest.eventHandlers.<computed> (/workspaces/ecshop_front_react/ecshop_front/node_modules/follow-redirects/index.js:14:24)
    at ClientRequest.emit (node:events:513:28)
    at Socket.socketErrorListener (node:_http_client:494:9)
    at Socket.emit (node:events:513:28)
    at emitErrorNT (node:internal/streams/destroy:157:8)
    at emitErrorCloseNT (node:internal/streams/destroy:122:3)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  port: 5000,
  address: '127.0.0.1',
  syscall: 'connect',
  code: 'ECONNREFUSED',
  errno: -111,

開発環境

開発環境
OS:windows10

バックエンド側：
IDE:IntelliJ Community
spring-boot-starter-parent 2.75
java　：　11

フロントエンド：
IDE:VScode

├── @types/node@18.11.15
├── @types/react-dom@18.0.9
├── @types/react@18.0.26
├── axios@1.2.1
├── eslint-config-next@13.0.6
├── eslint@8.29.0
├── next-auth@4.18.7
├── next@13.0.6
├── react-bootstrap@2.7.0
├── react-dom@18.2.0
├── react@18.2.0
├── styled-components@5.3.6
├── styled-jsx@5.1.1
└── typescript@4.9.4

解決方法

apiのURIをIPアドレス表記にすることで解決しました。

fetchメソッド→ドメイン表記でも通じる
axios→アドレス表記じゃないと通じない

import axios from 'axios';

 export  const getCategories = () =>{
-      return axios.get(`http://localhost:5000/api/category/all`);
+      return axios.get(`http://127.0.0.1:5000/api/category/all`);

};

参考

スクショ部分