useEffectを使用してレンダリング時にfetchメソッドでExpressサーバからデータを取得するには

Question

前提

はじめまして。プログラミング初心者です。
フロントはReact, バックはNode.js, Expressを使ってアプリケーションを構築しています。
useEffectを使用してレンダリング時にfetchメソッドでExpressサーバからデータを取得し、useStateで定義した変数に値を設定しようとしたのですが、以下のようなエラーが出てしまいました。どなたかご教授ください。回答お待ちしております。🙇

実現したいこと

・useEffectを使用してレンダリング時にfetchメソッドでExpressサーバからデータを取得し、useStateで定義した変数に値を設定する。

発生している問題・エラーメッセージ

エラーメッセージ
Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

### 該当のソースコード

```ここに言語名を入力
JavaScript

【Reactのpackage.jsonファイル】
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:3001",
//略

【フロント:React】
import './App.css';
import { useState,useEffect } from 'react'

function App() {
const [message, setMessage] = useState('');
useEffect(() =>{
fetch('api')
.then((res) => res.json())
.then((data) => setMessage(data.message));
},[])
return (
<div className="App">
<h1>フロントエンド</h1>
<p>{ message }</p>
</div>
);
}

export default App;

【バック: Express】
const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
res.send('Hello World!')
});

app.get("/api", (req, res) => {
res.json({ message: "Hello World!" });
});

app.listen(port, () => {
console.log(listening on *:${port});
});

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

ここにより詳細な情報を記載してください。

Comments

[mather]

ExpressサーバーのレスポンスとしてReactを返しているわけではないようですが、
フロントエンドのURL（ブラウザに入力するアドレス）とExpressは異なりますか？
fetch() に入力する引数を "api" ではなく "http://..." のようなURLにすると動作しますか？

[hoshi-takanori]

React の package.json で "proxy": "http://localhost:3001" なので、Express は const port = 3000 ではなく 3001 にすべきでは…。

Answer 1

エラーメッセージを見る限り、APIとしてアクセスしたはずが、JSONではなくHTMLを返してしまっているようです。

何かしらエラーを吐いている、あるいはアクセスするパスを間違えて妙なレスポンスが得られている、などが考えられますので、ブラウザの開発ツールでリクエストとレスポンスを確認してみましょう。

Comments

[sssss00]

解決しました！回答ありがとうございました！