电子邮件表单应用: NodeJs + Express -无法获取/

Question

每当我在使用VS Code的实时服务器上运行我的应用程序时，我都会收到这个无法获取错误的信息。我最好的猜测是，这与我的路由错误有关，我只是不确定我的路由错误在哪里。感谢任何形式的帮助<3

目标是在应用程序完成时发送一个POST请求，并将用户的电子邮件输入到表单元素中。

app.js

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

const app = express();

//Middleware
app.use(express.json());

app.use(bodyParser.urlencoded({extended: false}));

console.log("The directory is:", (path.join(__dirname, '/site')));

app.use(express.static(path.join(__dirname, '/site')));

app.post('/', (req, res) => {
    console.log('hey!');
});

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

landing.html

<form action="/subscribe" method="POST">
  <div class="newsletter-form-grp">
     <i class="far fa-envelope"></i>
    <input name="email" id="email" required pattern="[a-z0-9.%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" type="email" placeholder="Enter your email...">
  </div>
  <button id="cta">SUBSCRIBE <i class="fas fa-paper-plane"></i></button>
</form>

landing.html中的JS代码

<script>
   //form submission
   let cta = document.getElementById('cta');
   let email = document.getElementById('email').value;
   let status = document.getElementById('status');

   cta.addEventListener('click', (event) => {
       event.preventDefault();

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

              fetch('/subscribe', fetchData)
                 .then(res => {
                   if(res.ok) {
                                // yay
                   } else {
                      status.classList.add('statusShow');
                   }
                })
       }
    });
</script>

JSON包

{
  "name": "Main",
  "version": "1.0.0",
  "description": "",
  "main": "site/js/app.js",
  "dependencies": {
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "index": "^0.4.0",
    "request": "^2.88.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  },
  "scripts": {
    "serve": "node app",
    "dev": "nodemon app"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

项目树：https://imgur.com/a/B9Ucrap

Answer 1

您的landing.html是一个静态文件(在site文件夹中？)，而且您也没有在Express中定义GET路由来提供此页面。因此，为了从浏览器访问它，您需要使用：http://localhost:5000/landing.html。

您的表单显示为：<form action='/subscribe' action='POST'>。因此，您的Express需要定义以下路由：

app.post("/subscribe", (req, res) => {
   console.log("hey!");
   res.send("got it!"); 
});

顺便说一句，您的Html没有id为status的元素。您的订阅按钮单击事件代码将命中错误。