Proxy error: Could not proxy request /users from localhost:3000 to http://localhost:3001/

Question

我正在从我的 ReactJS front-end 应用程序向我的 node/express 后端发送一些数据，但是，每当我发送数据时，我都会收到标题中提到的错误消息。

这是我的 ReactJS 代码：

class App extends React.Component {

constructor(props) {
    super(props);
    //states and binding functions
}

fetchData () {
    fetch('/users')
        .then(res => res.json())
        .then(users => this.setState({users}));
}

addUser (event) {

    let fileData = new FormData();

    fileData.append("file", this.state.filesToBeSent);

    axios.post('adduser', 
        querystring.stringify({
          entry: this.state.currname,
          passwrd: this.state.currpasswrd,
          fileData : fileData
        })
            )
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });

}

componentDidMount() {
    this.fetchData();
}

render() {
    return (
        <div className="App">
            <form onSubmit={this.addUser} encType="multipart/form-data">
                <label>New username:</label>
                <input value={this.state.currname} onChange={this.handleChange}></input>
                <input value={this.state.currpasswrd} onChange={this.handlePassword} />
                <input type="file" name="file" onChange={this.handleFile} />
                <button type="submit" >Add</button>
            </form>

            <h1>Current Users: </h1>
                {this.state.users.map((name, n) =>
                    //map through user-array and display names
                )}
            </ul>
        </div>
    );
}

}

（对不起，如果代码很多，我尽可能缩短了它，但我不确定哪些部分与问题相关）。

以下是我如何在节点中接收数据以及如何将部分数据保存到我的数据库中：

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, "./uploads/");
    },

    filename: (req, file, cb) => {
        const newFilename = `${uuidv4()}${path.extname(file.originalname)}`;
        cb(null, newFilename);
    },
})

const upload = multer({ storage });

router.post("/", upload.single("file"), (req, res) => {
    res.send(req.file + " and exit.");
    var newUser = new Todo();
        newUser.username = req.body.entry;
        newUser.passwrd = req.body.passwrd;
        newUser.save(function (err) {
            if(err) 
                res.send(err);
            res.send('User added successfully!');
        });
});

这就是奇怪的地方。该应用程序运行完美，直到我插入 upload.single("file")，但是，我似乎无法弄清楚原因。当我只有文本输入时我没有任何问题，即使我创建了 FormData() 等。在我实现它之前它仍然工作正常。

我尝试查找它并实施此处发布的答案，但是，似乎没有任何帮助。

在屏幕上我收到以下错误消息：Unhandled Rejection (SyntaxError): Unexpected token P in JSON at position 0 当我检查终端时，我收到标题中提到的错误消息。我尝试删除 content-headers（不确定那会做什么，但我遵循的实现文件上传的教程没有使用 content-headers，这就是我尝试删除它们的原因。有谁知道如何解决这个错误？

编辑：终端中的错误信息也包含ECONNRESET。我在终端 https://nodejs.org/api/errors.html#errors_common_system_errors 中跟踪了 link，但我仍然不确定如何解决这个问题。

Answer 1

我建议您将所有字段附加到 FormData 对象，并且不要将提交的数据转换为 json 字符串：

let fileData = new FormData();

fileData.append("entry", this.state.currname);
fileData.append("passwrd", this.state.currpasswrd);
fileData.append("file", this.state.filesToBeSent);

axios.post('adduser', fileData)
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

Proxy error: Could not proxy request /users from localhost:3000 to http://localhost:3001/

Proxy error: Could not proxy request /users from localhost:3000 to http://localhost:3001/

node.js

express

reactjs

multer