React用axios调用Express接口报ERR_CONNECTION_REFUSED如何解决

存在的问题 #

• 请求方法不匹配：后端/api/getData/:username定义的是GET类型接口，但前端用post()方法发起请求，属于核心逻辑错误。
• 连接拒绝排查前提：首先确认你的Node.js后端服务已经正常启动，启动后控制台会打印Server is listening on port 4000，未启动服务直接发起请求必然返回连接拒绝。
• axios参数写法错误：你把headers和mode配置写在了POST请求的第二个参数（请求体参数）位置，且配置项名称写错为header（少了末尾s），Content-Type同时写了两个有效值属于冗余配置。

修复代码 #

方案1：后端保留GET接口（更符合当前接口语义，推荐） #

直接修改前端Homepage.js的请求逻辑即可：

const onClick = () => {
    axios.get(`http://localhost:4000/api/getData/${username}`, {
        headers: { 'Content-Type': 'application/json' },
        mode: "cors"
    })
    .then((response) => {
        console.log(response);
    })
    .catch((error) => {
        if (error.response) {
            console.log(error.response.data);
            console.log(error.response.status);
            console.log(error.response.headers);
        } else if (error.request) {
            console.log(error.request);
        } else {
            console.log('Error', error.message);
        }
    })
};

方案2：保留前端POST请求，修改后端接口定义 #

修改Server/index.js的路由声明：

// 把原本的app.get改成app.post
app.post("/api/getData/:username", async (req, res) => {
    console.log(`starting script for user ${req.params.username}`);
    const data = await script(req.params.username);
    console.log(`stopping script for user ${req.params.username}`);
    res.send(data);
});

额外注意事项 #

• 如果你的前端是在其他端口启动（比如React默认的3000端口），你已经配置了app.use(cors())，跨域限制不会生效，无需额外调整。
• 启动顺序必须先启动后端Node服务，再启动前端开发服务，避免请求时后端还未运行。

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