发布一个简单的react表单——node、axios、nodemailer、backend、postman

Posted 2023-03-16

【中文标题】发布一个简单的react表单——node、axios、nodemailer、backend、postman

【英文标题】：Post a simple react form - node, axios, nodemailer, backend, postman

【发布时间】：2021-10-18 01:50:15

【问题描述】：

我已经设置了一个在 http://localhost:3000/about 上运行的反应表单，并且我的后端在端口 5000 (localhost:5000) 上运行。在 react 的 package.json 中，我设置了 "proxy":"localhost:5000:.

当我使用邮递员并将帖子发送到 localhost:5000/api/contact 时，电子邮件发送正确（我以 JSON 格式发送数据 - 姓名、电子邮件和消息）。状态 200

当我使用 react 表单时，数据已准备好作为 json，但我无法确定 baseURL 以正确发送方法 post。状态 404。我试过： 本地主机：3000/about/api/contact； 本地主机：3000/api/联系人； localhost:3000/api.... 无效...

仅供参考 服务器设置了以下中间件并且工作正常：

app.use('/api',contactRoute)

the controller is imported and coded as following:

router.post('/contact', (req, res)=>
    const data = req.body;

React 部分没有用 axios 正确发布，代码如下：

onSubmit: async (values) => 
        //values.preventDefault();

        try 

            const data = (JSON.stringify(values, null, 2))
            setLoader(true);
            console.log(data)
            await axios.post('/contact', data);

react 中的方法 post 从未完成，当我检查数据的 console.log 时，其结构正确为 JSON...status 404

【参考方案1】：

在您的 axois 请求中使用 post 参数 port: 5000 然后它将使用您的实际后端端口。

【讨论】：

感谢您的回复。如果你能帮忙的话，最后一件事。我设置了一个结构如下的网页：www.localhost:3000.com，然后是 www.localhost:3000.com/services，www.localhost:3000.com/about，www.localhost:3000.com/contactMe。当我使用来自 www.localhost:3000.com/contactMe 的 axios 时，当我发布表单时，我收到一个错误，因为在我的发布请求中缺少参数“contactMe”。通过邮递员我可以看到 post 方法适用于 localhost:3000/api/contact 和 localhost:5000/api/contact 并且不适用于 localhost:3000/contactMe/api/contact

【参考方案2】：

默认情况下，axios 使用 URL 中的基本路径。所以，这里是当一个 API 请求发出时。

await axios.post('/contact', data);

它实际上是在 localhost:3000 上发出 post 请求，而不是在 localhost:5000 上的后端服务器。另外，“api”也应该放在前面。

一种简单的方法是使用绝对 URL，它应该可以工作。

await axios.post('http://localhost:5000/api/contact', data);