REACT API 调用和 NODE.JS 代理服务器错误：无法加载资源：net::ERR_CONNECTION_REFUSED

Question

我正在尝试启动节点代理服务器，以便通过它调用 API 并将其应用于我的反应应用程序。我不知道我在启动服务器时做错了什么，但我无法让它工作。这是错误：

错误：网络错误 在 createError (createError.js:16) 在 XMLHttpRequest.handleError (xhr.js:99) 控制台。 @index.js:1 overrideMethod @react_devtools_backend.js:4049（匿名） @ App.js:16 :3001/:1 加载资源失败： net::ERR_CONNECTION_REFUSED index.js:1 错误：网络错误 在 createError (createError.js:16) 在 XMLHttpRequest.handleError (xhr.js:99) 控制台。 @index.js:1 overrideMethod @react_devtools_backend.js:4049（匿名） @ App.js:16 :3001/:1 加载资源失败： 网络::ERR_CONNECTION_REFUSED

我的 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");
});

我的 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;

当我启动应用程序时，我只需在终端输入“npm start”，但我不知道该命令是否也会启动服务器。

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": ""
}

Answer 1

您没有创建服务器并将其传递给 express 应用程序。

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', onError);
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);
}

Answer 2

从您的package.json 看来，脚本npm start 只是在初始化您的前端（react 应用程序），这基本上意味着 express 服务器没有运行以实际处理任何 api 调用。您将不得不使用node server.js 运行您的快速服务器（如果文件嵌套使用适当的目录）