Node.js替换PHP后，前端client-js调用API无法显示文件值求助

• 已实现功能：正常显示/constants目录下所有文件名
• 故障表现：点击文件名无法加载对应文件的值，已排查4小时；原PHP实现的相同功能正常，换成Node.js后API调用失效，添加console.log无输出

我怀疑问题出在这段前端代码：

document.addEventListener('DOMContentLoaded', function () {
    const constantLinks = document.querySelectorAll('.lst');
    const constantValue = document.getElementById('constantValue');

    constantLinks.forEach(link =>
        link.addEventListener('click', function (event) {
            event.preventDefault();
            fetch('https://localhost:3000/data/' + this.textContent.split('(')[0])
                .then(response => response.text())
                .then(value => {
                    constantValue.textContent = value;
                })
                .catch(error => {
                    console.error('Error:' + error);
                });
        })
    )
});

排查建议： #

1. 验证请求URL的正确性

   • 打印this.textContent.split('(')[0]的结果，确认是否和/constants目录下的实际文件名完全匹配（注意大小写、空格、特殊字符）
   • 直接在浏览器地址栏访问https://localhost:3000/data/[实际文件名]，看是否能返回文件内容，排除后端路由问题

2. 完善错误捕获逻辑

   • HTTP状态码错误（如404、500）不会触发catch，需要在第一个then里判断响应状态：

     .then(response => {
         if (!response.ok) {
             throw new Error(`请求失败，状态码：${response.status}`);
         }
         return response.text();
     })
     

3. 确认事件绑定与DOM元素有效性

   • 在点击事件回调开头添加console.log('触发点击事件')，确认事件是否成功绑定
   • 打印constantValue，确认DOM中存在id="constantValue"的元素，避免因元素不存在导致赋值失败

4. 检查后端CORS配置

   • 如果前端和Node.js后端的端口/域名不同，需在后端配置CORS，否则浏览器会拦截跨域请求

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