create-react-app/express 代理错误：无法代理请求（ECONNRESET）

Posted 2023-02-27

【中文标题】create-react-app/express 代理错误：无法代理请求（ECONNRESET）

【英文标题】：create-react-app/express Proxy error: Could not proxy request (ECONNRESET)

【发布时间】：2020-08-04 12:33:04

【问题描述】：

我使用 create-react-app 创建了一个 react 应用程序，并使用 express-generator 创建了一个 express 服务器。我的 react 应用程序在 http://localhost:3000 上运行，我的 express 服务器在 http://localhost:8080 上运行。在我的组件中，我正在向我的 express 服务器发出 POST fetch 请求，该服务器正在成功运行我的 express 路由器代码，返回 200 响应状态代码。但是，客户端控制台记录以下错误并且没有收到响应：

Proxy error: Could not proxy request /components/findAlbumArt from localhost:3000 to http://localhost:8080.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).

在网络选项卡下的浏览器中，我可以看到findAlbumArt 请求现在的状态为(canceled)。

我的反应代码：

import React,  Component  from "react";

class Search extends Component 
  constructor(props) 
    super(props);
    this.state =  value: "" ;
  

  handleChange = (event) => 
    this.setState( value: event.target.value );
  ;

  handleSubmit = async (event) => 
    let response = await fetch("/components/findAlbumArt", 
      method: "POST",
      headers: 
        "Content-Type": "application/json",
      ,
      body: JSON.stringify(
        value: this.state.value,
      ),
    );

    response = await response.json();

    this.props.setAlbumArt(response.albumArtUrl);
  ;

  render() 
    return (
      <form onSubmit=this.handleSubmit>
        <label>
          Find an album that you love:" "
          <input
            type="text"
            value=this.state.value
            onChange=this.handleChange
          />
        </label>" "
        <input type="submit" value="Submit" />
      </form>
    );
  


export default Search;

我的快递代码：

const express = require("express");
const cache = require("../bin/cache/cache");
const axios = require("axios");
const router = express.Router();

router.post("/findAlbumArt", async (req, res, next) => 
  res
    .status(200)
    .json(
      albumArtUrl:
        "https://i.scdn.co/image/ab67616d0000b2739feadc48ab0661e9b3a9170b",
    );

    // I commented out my other code to simply test returning a success response
  );

module.exports = router;

其他相关文件：

app.js

const express = require("express");
const path = require("path");
const createError = require("http-errors");
const logger = require("morgan");
const cookieParser = require("cookie-parser");
const bodyParser = require("body-parser");

let app = express();

const indexRouter = require("./routes/index");
const componentsRouter = require("./routes/components");

// view engine setup
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "pug");

app.use(logger("dev"));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded( extended: false ));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, "public")));

app.use("/components", componentsRouter);
app.use("/", indexRouter);

// catch 404 and forward to error handler
app.use(function (req, res, next) 
  next(createError(404));
);

// error handler
app.use(function (err, req, res, next) 
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get("env") === "development" ? err : ;

  // render the error page
  res.status(err.status || 500);
  res.render("error");
);

module.exports = app;

快递包.json

  "name": "onboarding",
  "version": "0.0.0",
  "private": true,
  "scripts": 
    "dev": "nodemon ./bin/www",
    "start": "node ./bin/www"
  ,
  "dependencies": 
    "async-redis": "^1.1.7",
    "axios": "^0.19.2",
    "body-parser": "^1.19.0",
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1",
    "pug": "2.0.0-beta11"
  

客户端包.json

  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": 
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  ,
  "scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  ,
  "proxy": "http://localhost:8080",
  "eslintConfig": 
    "extends": "react-app"
  ,
  "browserslist": 
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  

任何帮助将不胜感激。谢谢！

【参考方案1】：

实际上自己解决了这个问题。我在handleSubmit() 处理函数中缺少event.preventDefault();。

点击提交按钮时浏览器页面正在重新加载，导致请求在完成之前被取消。

【讨论】：

感谢分享这个答案。这解决了我遇到几乎相同问题的一半问题。另一半是我在 Axios 回复中不小心使用了response.send()。所以基本上我试图在前端使用快速响应，这非常愚蠢。猜猜我在写的时候把它隔开。

很高兴我能帮上忙！