发布一个简单的反应表单 - 节点，公理，节点邮件程序，后端，邮递员

Question

我已经设置了一个运行在http://localhost:3000/about上的react表单，并在端口5000 (localhost:5000)上运行了后端。在react的package.json上，我设置了“代理”:“localhost:5000:。

当我使用邮递员并将帖子发送到本地主机：5000 / api /联系人时，电子邮件已正确发送（我以JSON格式发送数据 - 名称，电子邮件和消息）。状态 200

当我使用react表单时，数据已经作为json准备好了，但我无法找到baseURL来正确发送方法post。状态404。我尝试了：localhost:3000/about/api/contact；本地主机：3000/api/contact；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);

反应中的方法帖子从未完成，当我检查数据console.log时，结构正确为JSON…状态404

Answer 1

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

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

它实际上是在localhost:3000上发出post请求，而不是在localhost:5000上发出请求。还有，“api”也要前置。

一种简单的方法是使用应该有效的绝对URL。

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

Answer 2

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