REACT API调用和NODE.JS代理服务器错误:Failed to load resource: net::ERR

Question

我试图启动一个节点代理服务器，以便通过它调用API并将其应用于我的react应用程序。我不知道启动服务器时我做错了什么，但我无法使其工作。下面是错误:

Error: Network Errorat createError (createError.js:16)在XMLHttpRequest。handleError (xhr.js:99)@ react_devtools_backend.js:4049(匿名)@ App.js: 16:3001/:1加载资源失败net::ERR_CONNECTION_REFUSED index.js:1 Error: Network Errorat createError (createError.js:16)在XMLHttpRequest。handleError (xhr.js:99)@ react_devtools_backend.js:4049(匿名)@ App.js: 16:3001/:1加载资源失败net:: 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"但是我不知道这个命令是否也启动了服务器。

包。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应用程序)，这基本上意味着快递服务器没有运行实际处理任何api调用。你必须使用node server.js来运行你的快速服务器(如果文件嵌套，使用合适的目录)