cannot GET /delete node JS

Question

Пишу REST API на node JS для архива книг. В качестве БД-postgres, шаблонизатор-handlebars. Возникла проблема: Запрос post обрабатывается нормально, но на запрос delete выдает cannot GET /delete.

Попробовал сделать запрос delete localhost:3000/delete/21 через postman и он спокойно удалил книгу с id=21 из postgre. Не понимаю в чем проблема.

App.js:

let express =require('express'),
    pg = require('pg'),
    path = require('path'),
    hbs = require('express-handlebars'),
    bodyParser = require('body-parser'),
    app = express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.set('views', path.join(__dirname, 'views'));
//app.set('views', './views');
app.engine('hbs', hbs({extname: 'hbs', defaultLayout: 'main', layoutsdir: __dirname + '/views/Layouts'}));
app.set('view engine', 'hbs');
app.use(express.static('public'));

const { Pool } = require('pg')
const pool = new Pool({
    host: 'localhost',
    user: 'bookAdmin',
    database: 'Books',
    password: '666',
    port: 5432,
});

app.get('/', (req, res) => {
    pool.connect((err, client, release) => {
        if (err) {
            return console.error('Error acquiring client', err.stack)
        }
        client.query('SELECT * from "Books"', (err, result) => {
            if (err) {
                return console.error('Error executing query', err.stack)
            }
            res.render('index', {
                Books: result.rows,
                style: 'main.css'
                                });
        })
    })
});

app.post('/add', (req, res) => {
    pool.connect((err, client, release) => {
        if (err) {
            return console.error('Error acquiring client', err.stack)
        }
        client.query('INSERT INTO "Books"(title, descr) VALUES($1, $2)', 
            [req.body.title, req.body.descr]);
        res.redirect('/');
    })
});

app.delete('/delete/:id', (req, res) => {
    pool.connect((err, client, release) => {
        if (err) {
            return console.error('Error acquiring client', err.stack)
        }
        var id = parseInt(req.params.id, 10);
        console.log("req.params.id= " + id);
        client.query('DELETE FROM "Books" WHERE id = $1', [id]);
        res.redirect('/');
    })
});

app.listen(3000, function(){
    console.log('serv started');
});

шаблон:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/{{style}}">
    <title>Book-API</title>
</head>
<body>
    <div>
        {{{body}}}

        <button class="trigger" >Add a book</button>
    <div class="modal">
        <div class="modal-content">
            <form method="post" action="/add">
                <span class="close-button">×</span>
                <label>Title</label>
                <input type="text" name="title"/>
                <br>
                <label>Description</label>
                <textarea name="descr"></textarea>
                <br>
                <input type="submit" value="Save" />
            </form>
        </div>
    </div>
    
    <script>
        /*modal popup*/
        var modal = document.querySelector(".modal");
        var trigger = document.querySelector(".trigger");
        var closeButton = document.querySelector(".close-button");

        function toggleModal() {
            modal.classList.toggle("show-modal");
        }

        function windowOnClick(event) {
            if (event.target === modal) {
                toggleModal();
            }
        }
        trigger.addEventListener("click", toggleModal);
        closeButton.addEventListener("click", toggleModal);
        window.addEventListener("click", windowOnClick);
        /*modal popup*/
        
        function deleteItem(id) {
            if (confirm("Are you sure?")){
                window.location.href = "/delete/" + id;
            }
        }
    </script>
    </div>
</body>
</html>

Index:

h1>Book archive:</h1>
<ul>
    {{#each Books}}
        <li>
            <strong>Title:</strong> "{{this.title}}"
            <br>
            <strong>Description:</strong> "{{this.descr}}"
            <br>
            <strong>id:</strong> {{this.id}}
            <br>
            <button class="editButton">Edit</button>  <button class="deleteButton" onclick="deleteItem({{id}})">Delete</button>
        </li>
        <br>
    {{/each}}
</ul>

очень надеюсь на вашу помощь!

Answer 1

window.location.href=... сделает GET запрос. вам надо реализовать DELETE запрос. например вашим же node.js.

На вскидку: https://stackoverflow.com/questions/49857703/nodejs-delete-request-via-jquery-ajax

И сразу. Через форму с method="delete" не получится. Браузерами это не поддерживается.

Ну и конечно вы всегда можете в своем обработчике обратиться к XMLHttpRequest. типа такого:

function deleteItem(id) {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "DELETE", "/delete/" + id, false ); // false for synchronous request
        xmlHttp2.send( null );

}

БЛОГ НА HUSL

cannot GET /delete node JS

Ответы (1 шт):