前提

現在こちらのサイトを参考に、フロントReact、バックNodeのアプリケーションを作成しています。

URL：https://reffect.co.jp/react/front-react-back-node

NodeのExpressサーバーを「http:localhost3001」で稼働し、Reactを「http:localhost3000」で起動するところまでは完了しています。

実現したいこと

Reactファイル（App.tsx）にて、useEffect（Hook）内でExpressサーバからfetchを使ってデータを取得できるよう設定し、取得したデータをuseStateで定義した変数messageに設定し、ブラウザに表示したいです。
（Epressサーバーから取得したデータをReactで表示したい）

Reactのpackage.jsonファイルにproxyを設定しているため、CORSポリシーによるブロックは回避できています。（たぶん....）

問題

参考サイトの手順通りに進めているものの、以下のエラーが発生します。（表示されるエラーはこれだけです）

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

ソースコード

フォルダの構成

front_react_back_node
∟backend
  ∟index.js
∟frontend
  ∟node_modules
  ∟public
    ∟index.html他
  ∟src
    ∟App.tsx
    ∟index.tsx他

backend/index.js

const express = require('express');
const app = express();
const port = process.env.PORT || 3001;

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}`);
});

frontend/src/App.tsx

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;

/frontend/package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:3001",
省略

調べたこと

fetch自体は成功しているものの、JSONファイルとして取得できていないことが原因だと思います。しかし、対処法が分からず、調べても同様のケースを発見できずに困っています。

どなた詳しい方、お知恵をお貸し下さい。お願いします。

退会済みユーザー

2022/04/27 23:12

Fiddler などのキャプチャツール (ブラウザのディベロッパーツールでも可) を使って要求・応答をキャプチャして期待通りか調べてください。それが分からないことには闇夜に鉄砲、暗中模索という感じです。

退会済みユーザー

2022/04/28 05:04

jsonじゃなくhtmlが返ってきているとか？

maya_teratail

2022/04/28 09:50

>jsonじゃなくhtmlが返ってきているとか？おそらくそうだと思います。ディベロッパーツールでエラーが起きているソースを確認してみたら、htmlファイル（frontend/public/index.htmlと同じ内容のファイル※1）が表示されていたので。※1 ファイル名はindex.htmlではなく、VM385932のような名前でした。これは、fetchの文法になにか問題があるからでしょうか？ ①fetchでPromiseオブジェクトを取得 ②res.json()でJSONオブジェクトを受け取り ③data.messageでmessageを取り出すこういった流れで処理が進んでいる認識ですが、そもそもfetchでPromiseオブジェクトを取得できていないのでしょうか？