尝试从 React 向 Node 发送发布请求时出现代理请求错误，代理在获取请求时工作正常

Question

我在尝试发送 POST 请求以登录用户时遇到了这个确切的错误：

[HPM] 尝试将请求 /api/login 从 localhost:3000 代理到 http://localhost:5000 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors) 时出错

起初我认为这是与如何在客户端和服务器之间设置代理有关的问题，但我可以很好地从后端获取数据。因此，当我尝试将数据发布到后端时，问题必须解决（我认为？？）

这是我的 React 登录组件：

import React from 'react'

class Login extends React.Component {
    state = {}

    handlChange = event => {
        const { name, value } = event.target
        this.setState({ [name]: value })
    }

    handleSubmit = () => {
        fetch("/api/login", {
            method: "POST",
            headers: {
                'content-type': 'application/json' 
            },
            body: JSON.stringify(this.state)
        })
    }

    render() {
        console.log(this.state)
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <input type="text" name="username" value={this.state.username} onChange={this.handlChange} placeholder="Username" />
                    <input type="password" name="password" value={this.state.password} onChange={this.handlChange} placeholder="Password" />
                    <button>Login</button>
                </form>
            </div>
        )
    }
}


export default Login 

按照 React 文档的建议，我在 src 文件夹中使用 setUpProxy.js 文件来设置代理，它看起来像这样：

const proxy = require("http-proxy-middleware")

module.exports = function(app) {
    app.use(
        '/api',
        proxy({
            target: 'http://localhost:5000',
            changeOrigin: true 
        })
    );
};

客户端应用程序是使用 create-react-app 构建的，如果这有什么不同的话

Answer 1

如果您使用的是 express like 的中间件

app.use(express.json())
app.use(express.urlencoded({ extended: true }))

您可以尝试将该中间件设置移动到您的代理设置下方。据我了解，执行内置正文解析器功能的 express 中间件将请求流转换为常规对象，这可能是问题所在。

将中间件移到代理下方解决了我们的问题。

我知道这篇文章很老了，但它似乎和Github issue (Hanging Post requests) 一样。

这可能是也可能不是您需要的解决方案，但也许它会帮助那里的人......

Answer 2

我们遇到了类似的问题，事实证明并非所有标头都由 HPM 转发。尝试在选项中添加 Keep-Alive 标头：

const proxy = require("http-proxy-middleware")

module.exports = function(app) {
    app.use(
        '/api',
        proxy({
            target: 'http://localhost:5000',
             headers: {
                "Connection": "keep-alive"
            },
            followRedirects: true,
            changeOrigin: true 
        })
    );
};