Heroku链接返回404错误，CRUD应用开发问题求助

• 作业开发自定义CRUD应用，老师提供的Heroku接口链接是https://ancient-taiga-31359.herokuapp.com/api/houses，但控制台持续报错POST https://ancient-taiga-31359.herokuapp.com/ 404 (Not Found)
• 老师的应用用houses资源，我的应用用rescues资源，能不能直接把链接末尾改成rescues？
• 急需基础讲解：Heroku链接在JavaScript（结合AJAX、HTML、Bootstrap、jQuery）中的使用方法，以及VS Code和Heroku链接的工作逻辑（本人对服务器开发完全陌生）

我的代码 #

JavaScript代码 #

class RescueService{
    static url = 'https://ancient-taiga-31359.herokuapp.com';

    static getAllRescues(){
        return $.get(this.url);
    }
    static updateRescue(house){
        return $.ajax({
            url: this.url + `/${house._id}`,
            dataType: 'json',
            data: JSON.stringify(house),
            contentType: 'application/json',
            type: 'PUT'4

class DOMManager {
    static rescues;

    static getAllRescues(){
        RescueService.getAllRescues().then(rescues => this.render(rescues));
    }

    static createRescue(name){
        RescueService.createRescue(new Rescue(name))
        .then(() =>{
            return RescueService.getAllRescues();
        })
    }

    static deleteRescue(id){
        RescueService.deleteRescue(id)
            .then(() => RescueService.getAllRescues())
            .then(rescues => this.render(rescues));
    }
    
    static addAnimal(id) {
        for (let rescue of this.rescues) {
            if (rescue._id == id) {
                rescue.animals.push(new Animal($(`#${rescue._id}-animal-name`).val(), $(`#${rescue._id}-type-name`).val()));
                RescueService.updateRescue(rescue)
                    .then(() => RescueService.getAllRescues())
                    .then(rescues => this.render(rescues));
            }
        }
    }    


    static render(rescues) {
        $('#app').empty();
        if (Array.isArray(rescues)) {
            for (let rescue of rescues) {
                $('#app').prepend(
                `<div id="${rescue._id}" class="card">
                        <div class="card-header">
                            <h2>${rescue.name}</h2>
                            <button class="btn btn-danger" onclick="DOMManager.deleteRescue(${rescue._id})">Delete</button>
                        </div>
                        <div class="card-body">
                            <div class="card">
                                <div class="row">
                                    <div class="col-sm">
                                        <input type="text" id="${rescue._id}-animal-name" class="form-control" placeholder="Animal Name"></input>
                                    </div>
                                    <div class="col-sm">
                                        <input type="text" id="${rescue._id}-type-name" class="form-control" placeholder="Type of Animal"></input>
                                    </div>
                                </div>
                            </div>
                            <button id="${rescue._id} + new-type" onclick="DOMManager.addAnimal('${rescue._id}')" class="btn btn-primary form-control">Add</button>
                        </div>
                    </div>
                </div>
                `
                );
                for (let animal of rescue.animals){
                    $(`#${rescue._id}`).find('.card-body').append(
                        `<p>
                            <span id="name-${animal._id}"> <strong>Animal: </strong> ${animal.name} </span>
                            <span id="name-${type._id}"> <strong>Type: </strong> ${animal.name} </span>
                            <button class="btn btn-danger" onclick="DOMManager.deleteRoom('${rescue._id}', '${animal._id}')">Delete Room</button>
                        </p>
                        `
                    )
                    .then(rescues => this.render(rescues));
                }
            }
        }
    }
}

$(document).on('click', '#create-new-rescue', () => {
    DOMManager.createRescue($('#new-rescue-name').val());
    $('#new-rescue-name').val('');
});

DOMManager.getAllRescues();

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animal Rescue App</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>

    <div id="new-rescue">
        <h2>New Rescue</h2>
        <input type="text" id="new-rescue-name" class="form-control"><br>
        <button id="create-new-rescue" class="btn btn-primary form-control">Create</button>
    </div>
    <div id="app">

    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <script src="index.js"></script>

</body>
</html>

一、核心错误修复 #

1. 接口路径修正 #

你遇到404的根本原因是：代码里的请求路径只写了Heroku域名，没加/api/rescues这个资源路径。老师的链接是/api/houses，你的应用用rescues资源，直接把路径改成https://ancient-taiga-31359.herokuapp.com/api/rescues即可，同时要修正请求拼接逻辑：

class RescueService{
    // 修正接口根路径
    static url = 'https://ancient-taiga-31359.herokuapp.com/api/rescues';

    static getAllRescues(){
        return $.get(this.url); // 现在请求的是/api/rescues，不是根域名
    }
    // 补全缺失的方法和语法错误
    static updateRescue(rescue){
        return $.ajax({
            url: `${this.url}/${rescue._id}`, // 拼接成/api/rescues/xxx
            dataType: 'json',
            data: JSON.stringify(rescue),
            contentType: 'application/json',
            type: 'PUT'
        });
    }
    // 补上你调用了但没实现的createRescue方法
    static createRescue(rescue){
        return $.ajax({
            url: this.url,
            dataType: 'json',
            data: JSON.stringify(rescue),
            contentType: 'application/json',
            type: 'POST'
        });
    }
    // 补上deleteRescue方法
    static deleteRescue(id){
        return $.ajax({
            url: `${this.url}/${id}`,
            type: 'DELETE'
        });
    }
}

2. 其他代码错误修正 #

• updateRescue方法末尾多了个4，还缺失闭合的})
• render方法里的${type._id}要改成${animal._id}，按钮文本Delete Room改成Delete Animal，且DOMManager.deleteRoom方法未实现，需要补上或暂时移除
• onclick="DOMManager.deleteRescue(${rescue._id})"里的ID是字符串，要加引号：onclick="DOMManager.deleteRescue('${rescue._id}')"

二、Heroku链接基础用法 #

Heroku上的应用是一台远程服务器，你的前端JS通过AJAX请求和它通信，核心规则是：

• GET /api/rescues：获取所有rescue数据
• POST /api/rescues：新建一条rescue数据
• PUT /api/rescues/xxx：修改ID为xxx的rescue数据
• DELETE /api/rescues/xxx：删除ID为xxx的rescue数据

Bootstrap只负责页面样式，和接口请求无关；jQuery的$.get/$.post/$.ajax就是帮你发送这些请求的工具，只要URL拼对，就能和服务器交互。

三、VS Code与Heroku的关系 #

VS Code只是你的代码编辑器，和Heroku没有直接绑定：

• 你在VS Code写完代码后，用本地浏览器打开HTML文件，浏览器会执行JS里的AJAX请求，直接和Heroku的远程服务器通信
• 不需要额外配置VS Code，只要代码里的接口URL正确，就能正常请求

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