javascript - 发送 vanilla JS fetch 以在启用 AJAX 的登录表单上发送发布请求时遇到问题

Question

我正在开发一个使用 fetch 发送包含表单登录信息的“发布”请求的项目，我很确定我已经正确地写出了代码，但是我收到了错误：“无法加载资源：当我提交时，服务器响应状态为 500（内部服务器错误）”。任何帮助将非常感激。

以下是说明：

1.创建一个包含“用户名”和“密码”表单字段的“登录”HTML表单。</p>

2. 创建一个 .js 文件并在您的 HTML 表单文档中引用它。

3. 使用 JavaScript fetch 发送一个包含表单字段值“用户名”和“密码”的 POST 请求。将包含您的用户名和密码的请求发送到https://ict4510.herokuapp.com/api/login。（ICT 4510 API 文档（链接到外部站点。））如果请求成功，它将返回 HTTP 状态代码 200，并且响应将包含用户对象。注意：您将获得用户名和密码。如果您没有凭据，请向您的讲师发送电子邮件。

4. 将在响应中找到的用户对象保存到 sessionStorage (HTML5 API)。

5. 成功登录后隐藏表单，并显示包含用户名的欢迎消息。

HTML：

<form class="form" id="myForm"> 

    <label for="username">Username</label>
    
    <input type = "text" name ="username" id="username">
    
    <label for="password">Password</label>
    
    <input type = "password" name ="password" id="password">
    
    <button type="submit">Login</button>
</form>
<script src="js/fetchPost.js"></script>

javascript

const myForm = document.getElementById('myForm');

myForm.addEventListener('submit', function (e) {

e.preventDefault();

const formData = new FormData(this);

fetch('https://ict4510.herokuapp.com/api/login', {

    method: 'post',

    body:  formData

}).then(function (response)  {

    return response.text();

}).then(function (text)  {

    console.log(text);

}).catch(function  (error)  {

    console.error(error);



})
});

标签： javascriptajaxpostfetch