Express接收HTML表单POST请求报ERR_CONNECTION_REFUSED如何解决？

问题产生原因 #

• res.sendFile路径拼接错误：__dirname + "./public/index.html" 拼接后路径非法，__dirname末尾没有路径分隔符，直接拼接会得到类似/你的项目路径./public/index.html的无效路径，导致首页无法正常返回，若直接打开本地html文件提交请求就会触发跨域/地址不匹配的连接拒绝错误。
• POST接口无响应返回：服务端POST路由仅做了日志打印，未给前端返回任何响应内容，也未结束请求，会导致前端请求超时，且前端逻辑判断依赖返回的success字符串，完全匹配不到对应值。
• 前端代码拼写错误：表单重置逻辑里的emai.value = ''拼写错误，缺少字母l，运行时会抛出未定义变量错误，中断后续逻辑。
• 服务未启动/页面入口错误：本地调试时如果没有提前启动server.js服务，或是直接双击打开本地html文件（使用file://协议访问），提交请求时就会触发ERR_CONNECTION_REFUSED报错。

解决方案 #

1. 修复静态文件路径问题，引入path模块处理路径拼接，修改server.js代码：

var express = require("express");
var path = require("path");
var app = express();
let PORT = process.env.PORT || 3000;

// Middleware
app.use(express.static("public"));
app.use(express.json());

app.get("/", function(req, res) {
  // 用path.join兼容不同系统的路径分隔符，避免拼接错误
  res.sendFile(path.join(__dirname, "public", "index.html"));
});

app.post("/", function(req, res) {
    console.log('kkk', req.body);
    // 给前端返回对应响应内容
    res.send('success');
});

var server = app.listen(PORT, function() {
  console.log("Express server listening on port " + PORT);
});

2. 修复前端代码的拼写错误：

// 把原来的emai.value改成email.value
if(xhttp.responseText == 'success') {
    console.log('Email sent successfully');
    fullName.value = '';
    email.value = '';
    phone.value = '';
    message.value = '';
}

3. 本地调试正确流程：
   • 执行node server.js启动服务，确认控制台打印出服务启动成功的日志
   • 打开浏览器访问http://localhost:3000进入页面，再提交表单测试

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