フロントをreactバックをnodeで開発中にプロキシエラー

Question

フロントエンドを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.

該当のソースコード

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

app.get('/',(req,res)=>{
    res.send("hello world!")
})


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

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

  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "proxy":"https://localhost:3001",

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>
    </div>
  );
}

export default App;

試したこと

参考にしたサイトとの違いを修正