NodeJs+Express开发邮件表单应用出现Cannot GET /报错如何解决

根路径Cannot GET /报错原因 #

你配置的静态资源目录site下，Express默认会查找index.html作为根路径的默认返回文件，你项目的首页是landing.html，框架无法识别，访问根路径时就会抛出该错误。

其他共存问题 #

• 接口缺失：表单和fetch代码提交的目标路径是/subscribe，但app.js中只定义了无业务逻辑的POST /路由，完全没有配置/subscribe的POST路由，后续提交请求也会返回404。
• 前端JS逻辑错误：绑定按钮点击事件时使用了箭头函数，箭头函数没有独立的this指向，代码中的this.email为undefined，无法正常获取用户输入的邮箱值。

具体修改步骤 #

1 修改app.js代码 #

补充根路径访问逻辑，新增订阅接口路由，修改后完整代码如下：

const express = require('express');
const request = require('request');
const bodyParser = require('body-parser');
const path = require('path');

const app = express();

// 中间件配置
app.use(express.json());
app.use(bodyParser.urlencoded({extended: false}));

// 配置静态资源目录，指定默认索引为landing.html，解决根路径访问问题
app.use(express.static(path.join(__dirname, '/site'), {
  index: 'landing.html'
}));

// 新增订阅接口路由
app.post('/subscribe', (req, res) => {
  console.log('收到的订阅邮箱：', req.body.email);
  // 此处可补充后续发送邮件的业务逻辑
  res.status(200).json({code: 200, msg: '订阅成功'})
});

app.listen(5000, () => console.log('Server started!'))

2 修改前端内置JS代码 #

修正this指向问题，调整邮箱值获取逻辑，修改后代码如下：

<script>
   // 表单提交逻辑
   let cta = document.getElementById('cta');
   let emailInput = document.getElementById('email');
   let status = document.getElementById('status');

   cta.addEventListener('click', function(event) {
       event.preventDefault();
       const emailVal = emailInput.value.trim();

       if(!emailVal) {
             status.classList.add('statusShow');
       } else {
              let fetchData = {
                 method: 'POST',
                 body: JSON.stringify({email: emailVal, js: true}),
                 headers: {"Content-Type": "application/json"}
              }

              fetch('/subscribe', fetchData)
                 .then(res => {
                   if(res.ok) {
                     // 此处补充订阅成功后的交互逻辑
                   } else {
                      status.classList.add('statusShow');
                   }
                })
       }
    });
</script>

可选优化 #

如果需要兼容用户关闭JS的场景，可以在/subscribe路由中补充判断，针对表单默认提交的x-www-form-urlencoded类型请求返回对应的页面响应，避免提交后白页。

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