React.js fetch method on my api is not working?

Question

I am trying to do a simple fetch request from a database hosted on a local server and also I am connected to mongodb in the backend, it seems like something is going wrong with my fetch method. I am getting Failed to load resource: net::ERR_SSL_PROTOCOL_ERROR and Uncaught (in promise) TypeError: Failed to fetch

    function App() {


  const [state, setState]= useState({
    track: '',
    artist:'',
    album:'',
    year: 1990
  }
  )

  // const [token, setToken] = useState('');

  useEffect(() => {
   
      
    async function getData(){
      const track = await fetch('https://localhost:3001/api/music')
     .then(res => res.json());
      console.log(track)
      
      setState(track)
      // console.log(res)
    }
getData();

  },[])

also this is my route&controller functions

router.get('/', musicCtrl.index)

controller:

function index(req, res){
    Music.find({}, function(err, music){
        res.status(200).json(music)

    })
}

mongo connection

 const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const musicSchema = new Schema({
    track: String,
    artist: String,
    album: String,
    year: Number

}, {timestamps:true});


module.exports = mongoose.model('Music', musicSchema);

any help please?!

Answer 1

You are using HTTPS in the fetch url.

Change

const track = await fetch('https://localhost:3001/api/music')

to

const track = await fetch('http://localhost:3001/api/music')

The getData function is also mixing await and .then . Change it to:-

async function getData(){
  const track = await fetch('https://localhost:3001/api/music')
  console.log(track.json())
  setState(track.json())
}