I'm trying to start a node proxy server in order to call an API through it and apply it to my react app. I don't know what I'm doing wrong when starting the server, but I can't make it work. Here's the error:

Error: Network Error at createError (createError.js:16) at XMLHttpRequest.handleError (xhr.js:99) console. @ index.js:1 overrideMethod @ react_devtools_backend.js:4049 (anonymous) @ App.js:16 :3001/:1 Failed to load resource: net::ERR_CONNECTION_REFUSED index.js:1 Error: Network Error at createError (createError.js:16) at XMLHttpRequest.handleError (xhr.js:99) console. @ index.js:1 overrideMethod @ react_devtools_backend.js:4049 (anonymous) @ App.js:16 :3001/:1 Failed to load resource: net::ERR_CONNECTION_REFUSED

my server.js:

const express = require("express");
const app = express();
const cors = require("cors");
const { default: axios } = require("axios");
const port = 3001;
const http = require("http");

app.options("*", cors());

app.get("/", async (res) => {
  const response = await axios.request("https://superheroapi.com/api/apikey");
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  res.send(response);
});

app.listen(port, () => {
  console.log("express on port 3001");
});

my app.js:

import './App.css';
import axios from 'axios';


function App() {

const getAPI =  {
  method: "GET",
  url: "http://localhost:3001/"
}
axios.request(getAPI)
.then((response) => {
    console.log(response);
})
.catch((error) => {
    console.error(error);
});


  return (
    <>
    <h1>hello world</h1>
    </>
  );
}

export default App;

When I start the app I just type in the terminal "npm start" but I don't know if that command starts the server as well.

PACKAGE.JSON

{
  "name": "amadeo-dlp-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.21.4",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "main": "index.js",
  "devDependencies": {},
  "author": "",
  "license": "ISC",
  "description": ""
}

CodePudding user response：

You didn't create the server and pass it the express app.

const env = process.env.NODE_ENV || "development";
const express = require('express');
const app = express();
const port = process.env.PORT || 3001;
const cors = require('cors');
const server = require('http').createServer(app);
const axios = require('axios');

app.use(cors());
app.options('*', cors());

app.get("/", async (res) => {
    const response = await axios.request("https://superheroapi.com/api/apikey");
     res.header("Access-Control-Allow-Origin", "*");
     res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
         res.send(response);
     });

server.listen(port);
server.on('error', one rror);
server.on('listening', onListening);

function onError(error) {
  if (error.syscall !== 'listen') throw error;
  const bind = typeof port === 'string' ? 'Pipe '   port : 'Port '   port;
  switch (error.code) {
    case 'EACCES':
      console.error(bind   ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind   ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

function onListening() {
  const addr = server.address();
  const bind = typeof addr === 'string' ? 'pipe '   addr : 'port '   addr.port;
  console.log('Express server listening on '   bind);
}

CodePudding user response：

From your package.json it looks like the script npm start is just initializing your front-end only (react app), which basically means the express server is not running to actually handle any api calls. you're gonna have to run your express server using node server.js (if the file is nested use appropriate directory)