Node+Express表单提交无响应问题求助（附完整代码）

输入城市点击提交后页面无内容展示，URL变为http://localhost:3000/?，控制台首次请求返回200、后续多次请求返回304。以下是具体问题点及修复方案：

1. 表单默认提交行为未阻止 #

点击submit按钮时，表单会触发默认GET提交，导致页面刷新，直接中断前端异步请求流程，这是URL变化、无响应的核心原因。

修复代码（index.js）：

submitBtn.addEventListener("click", (event) => {
  event.preventDefault(); // 阻止表单默认提交行为
  const city = document.getElementById("city").value;
  if (city !== "") {
    getCountryInfo(baseURL, city, username)
      .then(function (info) {
        return postData("/add", { lat: info.lat, lng: info.lng, country: info.country }) 
      })
      .then(function () {
        receiveData()
      })
      .catch(function (error) {
        console.log(error);
        alert("City not found");
      });
    userInfo.reset();
  } else {
    submitBtn.classList.add("invalid");
  }
})

2. 前端脚本类型错误 #

index.html中脚本标签的type设为application/json，浏览器会将其当作JSON文件解析而非JS脚本，导致所有前端逻辑完全不执行。

修复代码（index.html）：

<script src="../index.js"></script>

3. 静态文件路径错误 #

server.js中express.static使用绝对路径/src/client，无法正确加载静态资源；app.get("/")的文件路径也存在相对路径错误。

修复代码（server.js）：

const path = require('path'); // 引入path模块

// ...

// 初始化静态资源目录
app.use(express.static(path.join(__dirname, './src/client')));

// 根路径返回index.html
app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, "./src/client/views/index.html"));
});

4. 异步链式调用断裂 #

原代码中getCountryInfo的then回调未返回postData的Promise，导致receiveData会在POST请求完成前执行，此时后端projectData还未更新，自然无法获取数据。

修复：在then回调中返回postData（已包含在第一个修复点的代码中）。

5. Geonames用户名无效 #

代码中使用sampleusername测试账号，调用Geonames API会返回错误，导致info['geonames'][0]不存在，触发异常。

修复：注册Geonames账号获取真实用户名，替换index.js中的变量：

const username = "你的真实Geonames用户名";

额外优化建议 #

• 在getCountryInfo中增加响应校验，避免空数据报错：

const getCountryInfo = async (baseURL, city, username) => {
  const res = await fetch(`${baseURL}?q=${city}&username=${username}`);
  try {
    const info = await res.json();
    if (!info.geonames || info.geonames.length === 0) {
      throw new Error("City not found");
    }
    return info['geonames'][0];
  } catch (error) {
    console.log("error", error);
    throw error; // 抛出错误让catch捕获
  }
};

• 304状态码是浏览器缓存导致，修复上述问题后，正常请求流程会覆盖缓存，无需额外处理。

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