Question

所以我有一个正在工作的书呆子堆栈。我正在从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

})

当我使用邮递员到这条路线时本地主机：8080 / auth / signup我得到正确的控制台日志，但是我的前端正在运行本地主机：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)

如何为完整的堆栈应用程序组合前端和后端端口？

谢谢

Answer 1

来自客户端的请求将发送到同一主机，因为路由以斜杠（\）开头

您的句柄提交应该看起来像

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

Answer 2

我最终在package.json文件中使用了代理。我使用的资源是： https://www.youtube.com/watch?v=v0t42xBIYIs 和 https://github.com/thechutrain/mern-passport/blob/master/package.json 和 https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development

无法在响应中发出发布请求（axios，前端和在不同端口上运行的节点服务器）

2 个答案: