配置CORS后React Axios请求Node.js MySQL接口返回404错误

这个404错误和CORS配置无关，是后端代码两处错误直接导致的：

• 前后端接口路径不匹配：前端Axios请求的地址是/user-create，后端注册的POST路由地址是/create-user，路径完全对不上
• 路由语法错误：后端app.post的括号提前闭合，后面写的请求处理函数根本没有绑定到路由上，就算路径改对也不会生效

错误返回里的Cannot POST /user-create就是Express框架给出的明确提示：服务端没有注册/user-create这个POST接口。

1. 统一前后端接口路径，二选一即可：
   • 要么把前端App.js里Axios的请求地址改成http://localhost:3030/create-user
   • 要么把后端Index.js里的路由路径改成/user-create
2. 修正后端路由的括号位置，把请求处理函数作为app.post的第二个参数传入，改完的路由代码如下：

// 注意：原来路径字符串后面的多余右括号要删掉，括号整体挪到处理函数末尾
app.post("/user-create", (req, res)=> {
    const referBy = req.body.referBy
    const referId = req.body.referId
    const eMail = req.body.eMail

    db.query(
        "INSERT INTO users (referBy, referId, eMail) VALUE (?,?,?)",
        [referBy, referId, eMail], 
        (err, result) => {
            console.log(result);
            if (err) {
                console.log(err);
                // 补充错误响应，避免数据库报错时前端一直挂起等待
                res.status(500).send("Data insert failed");
            } else {
                res.send("Values Inserted");
            }
    });
})

3. 保存修改后重启Node.js服务，再发起表单提交请求即可正常运行，原有CORS配置不需要调整。

内容的提问来源于stack exchange，提问作者00g