フロントエンドをreactバックエンドをnodeで開発をしようとしています
react localhost:3000 node localhost3001で起動し,localhost:3000にlocalhost:3001/apiの内容を表示させる機能を実装中に以下のエラーメッセージが発生しました。
参考にしたサイトhttps://reffect.co.jp/react/front-react-back-node
エラーメッセージ
Proxy error: Could not proxy request /api from localhost:3000 to https://localhost:3001.
該当のソースコード
nodejs
1const express =require('express'); 2const app =express() 3const port = process.env.PORT ||3001 4 5app.get('/',(req,res)=>{ 6 res.send("hello world!") 7}) 8 9 10app.listen(port,()=>{ 11 console.log(`listening on *${port}`); 12}) 13 14app.get("/api",(req,res)=>{ 15 res.json({message:"Hello World"}); 16}) 17
json
1 2 "name": "frontend", 3 "version": "0.1.0", 4 "private": true, 5 "proxy":"https://localhost:3001",
react
1import './App.css'; 2import { useState,useEffect } from 'react' 3 4 5function App() { 6 const [message,setMessage] = useState(''); 7 useEffect(() =>{ 8 fetch("api") 9 .then((res)=> res.json()) 10 .then((data)=> setMessage(data.message)); 11 },[]) 12 13 return ( 14 <div className="App"> 15 <h1>フロントエンド</h1> 16 </div> 17 ); 18} 19 20export default App;
試したこと
参考にしたサイトとの違いを修正
あなたの回答
tips
プレビュー