首页 > 解决方案 > 在反应中发出发布请求时遇到问题(axios、前端和节点服务器在不同的端口上运行)

问题描述

所以我有一个正在处理的 mern 堆栈。我正在从我的 SignupForm 组件发出发布请求。

  handleSubmit(event) {
        event.preventDefault()
        // TODO - validate!
        axios
            .post('/auth/signup', {
                username: this.state.username,
                password: this.state.password
            })

    }

到我的路由文件夹中的后处理程序

router.post('/signup', (req, res) => {
    //const { username, password } = req.body

    console.log('signup route hit in auth folder')
    res.end()
    // ADD VALIDATION

})

当我使用邮递员到这条路线 localhost:8080/auth/signup 时,我得到了正确的控制台日志,但是我的前端在 localhost:3000 上运行

我不断收到此错误

VM1951:1 POST http://localhost:3000/auth/signup 404 (Not Found)
(anonymous) @ VM1951:1
createError.js:16 Uncaught (in promise) Error: Request failed with status code 404
    at createError (createError.js:16)
    at settle (settle.js:18)
    at XMLHttpRequest.handleLoad (xhr.js:77)

我如何将前端和后端端口组合成一个完整的堆栈应用程序?

谢谢

标签: node.jsreactjs

解决方案


来自客户端的请求将发送到同一台主机,因为路由以斜杠 ( \)开头

您的句柄提交应如下所示

  handleSubmit(event) {
        event.preventDefault()
        // TODO - validate!
        axios
            .post('http://localhost:8080/auth/signup', {
                username: this.state.username,
                password: this.state.password
            })
    }

推荐阅读