Why Doesn't the Fetch API Call My API Endpoint I Created in Express?

Issue

I am wondering why the Fetch API in javascript isn’t call the endpoint I created in express. When I start my server and go to the ‘/characters’ endpoint, it returns correctly formatted JSON.

Here is my express index.js

const app = express();
const PORT = 3000;

const charactersRoute = require('./routes/characters');

//Characters Route
app.use('/characters', charactersRoute)

app.listen(PORT, function(err) {
    if(err) console.log(err);
    console.log(`Server is listening on port ${PORT}`)
})

Here is my Characters Route

const express = require('express'); // Web Framework
const https = require('https');
const router = express.Router();
const PORT = 3000;

// app.listen(PORT, function(err) {
//     if(err) console.log(err);
//     console.log(`Server is listening on port ${PORT}`)
// })

const api = 'https://www.breakingbadapi.com/api/characters/?limit=20';

router.get("/", function(req, res) {
    https.get(api, (response) => {
        console.log(response.statusCode);
        
        response.on('data', (d) => {
            const data = JSON.parse(d);
            res.send(data);
        })

        // res.send("Running")
    })
})

module.exports = router;

Here is my Characters.jsx file where I’m using Fetch

import React, {useEffect, useState} from 'react';
import Card from '@mui/material/Card';
import axios from 'axios';

export default function Character() {
    const [data, setData] = useState();

    useEffect(() => {
        fetch('/characters')
            .then(res => res.json())
            .then(data => setData(data))
            // console.log(data);
    }, []);


}

When I run my front end and check the response I receive, it returns my index.html.
If I fetch the API URL itself, then it correctly returns the JSON in my frontend. But When I try to fetch the API endpoint I created in express, I don’t get any data. Any suggestions?

Solution

You did not set the endpoint for the fetch function. It doesn’t know what API ‘/characters’ is. It is similar to saying the house number but not telling the street, you don’t know where to go. So you need to pass the absolute path to fetch to request data from the server, because the server is a different ‘entity’, it’s not the same with your front-end. Therefore, you need to provide the full API URL. Or, if using axios, since I see you imported it above, you must set axios.defaults.baseURL = <API_URL>, (or provide the full URL in the request itself just like in fetch) and then make the request with the help of axios, not fetch.

Therefore your React code will look a little something like this:

import React, {useEffect, useState} from 'react';
import Card from '@mui/material/Card';
import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:3000';

export default function Character() {
    const [data, setData] = useState();

useEffect(() => {
   const getData = async () => {
       try {
          const {data} = await axios.get('/characters');
          setData(data);
       } catch (err) {
          console.error(err);
       }
     };

    getData();
}, []);


}

But I suggest you create a different file with all the axios requests and there you set the baseUrl – that’s a better practice.

Answered By – Alex Matei

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published