Question 222504 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Couldn't fetch data from server.js to display in React component

I am working on a personal project that could eventually ask chatGPT to generate a writing prompt everyday for the users to write a response to the prompt. However, I just started learning React and Express and I’m trying to find a way to connect the front-end and back-end together. I’m trying to have my Test.jsx file fetch an example prompt from the server.js file and display it on the front end. However, I always have a lot of issues fetching it:

Test.jsx

import React, { useState, useEffect } from "react";
import axios from "axios";
export default function Test() {
  const [textPromptback, setPromptback] = useState("hello");

  useEffect(() => {
    axios
      .get("https://localhost:5000/api")
      .then((response) => {
        setPromptback(response);
      })
      .catch((error) => {
        console.error("Error fetching prompt:", error);
      });
  }, []);

  return <div>{textPromptback}</div>;
}

Server.js

const express = require('express');
const app = express();
const cors = require('cors');
app.use(cors());

// Use a different route name like "/api/writing-prompt"
app.get('/api', (req, res) => {
  const prompt = 'This is a prompt fetched from the backend';
  res.json({prompt});
});

app.listen(5000, () => {
  console.log('Server started on port 5000');
});

Error:

Error fetching prompt: AxiosError
(anonymous) @ Test.jsx:13
:5000/api:1     Failed to load resource: net::ERR_CONNECTION_REFUSED
Test.jsx:13 Error fetching prompt: AxiosError
(anonymous) @ Test.jsx:13
:5000/api:1     Failed to load resource: net::ERR_CONNECTION_REFUSED

I tried adding "proxy: "https://localhost:5000 into the package.json file of the React project and remove the https://localhost:5000 from the axios.get line in Test.jsx file and it gives me this error:

GET https://localhost:5000/api net::ERR_CONNECTION_REFUSED
dispatchXhrRequest @ xhr.js:251
xhr @ xhr.js:49
dispatchRequest @ dispatchRequest.js:51
request @ Axios.js:148
Axios.<computed> @ Axios.js:174
wrap @ bind.js:5
(anonymous) @ Test.jsx:7
commitHookEffectListMount @ react-dom.development.js:23150
invokePassiveEffectMountInDEV @ react-dom.development.js:25154
invokeEffectsInDev @ react-dom.development.js:27351
commitDoubleInvokeEffectsInDEV @ react-dom.development.js:27330
flushPassiveEffectsImpl @ react-dom.development.js:27056
flushPassiveEffects @ react-dom.development.js:26984
(anonymous) @ react-dom.development.js:26769
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Tags:

2

Answers


  1. 0

    Your backend code does not appear to handle SSL (which you would need for HTTPS requests), so adapt your client code to use HTTP instead:

    axios
  .get("http://localhost:5000/api")

    To use SSL and HTTPS, look around this question.

    Login or Signup to reply.
  2. 0

    Based on the code you have send I saw that you are doing an https request.

      useEffect(() => {
    axios
      .get("http://localhost:8000/api") // use http, not https
      .then((response) => {
        setPromptback(response.data.prompt);
      })
      .catch((error) => {
        console.error("Error fetching prompt:", error);
      });
  }, []);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search