web-dev-qa-db-fra.com

L'API de récupération ne peut pas charger le fichier: /// C: / Users / Jack / Desktop / Books_H / book-site / public / api / books. Le schéma d'URL doit être "http" ou "https" pour la demande CORS

Je viens de commencer à apprendre le nœud js dans mon école. Ils nous ont donné cette tâche à moitié terminée et j'ai besoin de faire fonctionner les boutons suivant et précédent. Cependant, j'obtiens des erreurs dans la console au moment où je lance le fichier index.html. Les erreurs sont:

"L'API de récupération ne peut pas charger le fichier: /// C:/Users/Jack/Desktop/Books_H/book-site/public/api/books. Le schéma d'URL doit être" http "ou" https "pour la demande CORS."

et l'autre est:

"TypeError non capturé (promis): échec de la récupération à HTMLDocument.document.addEventListener".

Je ne sais même pas comment commencer à résoudre ce problème. De l'aide?

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1000, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=Edge">
    <title>Hello</title>
</head>
<body>
    Hello from the other side! <b>Total: <span id="total"></span></b><br/>
    <button id="author">Sort by author</button>
    <button id="title">Sort by title</button>
    <table id="books" border="1">
        <tr>
            <th>
                Author
            </th>
            <th>
                Book Title
            </th>
        </tr>

    </table>
    <script src="index.js"></script>
</body>
</html>

Le fichier de script Java

    document.addEventListener("DOMContentLoaded", () => {
    processResponse(fetch("api/books"));

    document.getElementById("author").addEventListener("click", () =>{
        processResponse(fetch("api/books?sortby=author"))
    });

    document.getElementById("title").addEventListener("click", () =>{
        processResponse(fetch("api/books?sortby=title"))
    });

});

function processResponse(response) {
    let table = document.getElementById("books");
    let total = document.getElementById("total");

    response.then(data => data.json())
        .then(value => {
            table.innerHTML = "";
            const tr = document.createElement("tr");
            let th = document.createElement("th");
            th.innerHTML = "Author";
            tr.appendChild(th);
            th = document.createElement("th");
            th.innerHTML = "Book Title";
            tr.appendChild(th);
            table.appendChild(tr);
            for (let index = 0; index < value.books.length; index++) {
                const book = value.books[index];
                const tr = document.createElement("tr");
                let td = document.createElement("td");
                td.innerHTML = book.author;
                tr.appendChild(td);
                td = document.createElement("td");
                td.innerHTML = book.title;
                tr.appendChild(td);
                table.appendChild(tr);
            }
            total.innerHTML = value.total;
        });
}

fichier server.js

    const fs = require('fs');
const express = require('express');
const app = express();

app.use(express.static("public"));

app.get("/", (req, res) => {
    res.sendFile("index.html", { root: __dirname + "/public" });
});

const apiRouter = express.Router();

apiRouter.get("/books", (req, res) => {

    let sortOrder = req.query["sortby"];

    fs.readFile("data/books.json", { encoding: 'utf8' }, (err, data) => {
        if (err) {
            console.error("ERROR is: ", err);
            return;
        }

        let books = JSON.parse(data);
        if (sortOrder === "author") {
            books.sort((a, b)=> a.author.localeCompare(b.author));
        } else if (sortOrder === "title") {
            books.sort((a, b)=> a.title.localeCompare(b.title));
        }

        res.send(JSON.stringify({
            books: books.slice(0, 50),
            total: books.length
        }));
    });
})

apiRouter.get("/books/title", (req, res) => {
    fs.readFile("data/books.json", { encoding: 'utf8' }, (err, data) => {
        if (err) {
            console.error("ERROR is: ", err);
            return;
        }

        let books = JSON.parse(data);
        let titles = books.map(book => book.title);
        res.send(JSON.stringify(titles));
    });
})

apiRouter.get("/books/author", (req, res) => {
    fs.readFile("data/books.json", { encoding: 'utf8' }, (err, data) => {
        if (err) {
            console.error("ERROR is: ", err);
            return;
        }

        let books = JSON.parse(data);
        let authors = books.map(book => book.author);
        res.send(JSON.stringify(authors));
    });
})


app.use("/api", apiRouter);


app.listen(8080, () => console.log('Example app listening on port 8080!'));

/*
And the books.json file that i guess you dont need so i wont post it.
My folder structure is:

Books > data Folder > books.json. 
Books > public Folder > index.html. 
Books > public Folder > index.js.
Books > server.js.
*/
javascripthtmlnode.js
11
Happy Coconut

Eh bien, c'est ce que je devais faire si cela pouvait aider quelqu'un à l'avenir. Ce sont des trucs basiques mais je suis débutant alors c'est parti. Ouvrez l'invite de commande. Accédez à la destination de votre projet (où se trouve le fichier index.js) et écrivez:

$ npm init -y
$ npm install -g express-generator
$ npm install express -S
$ npm install connect -S
$ npm install serve-static -S

allez ensuite à la destination de votre fichier server.js et écrivez

$ node server.js

Après cela, je pouvais exécuter ma page dans le navigateur en tapant http: // localhost: 8080 / dans l'URL.

14
Happy Coconut

Si vous êtes sous Windows, créez un nouveau site dans votre IIS (vous devez activer IIS dans les composants Windows si ce n'est pas déjà fait) dans votre dossier de projet. Ensuite open http: // localhost: 808 (ou tout autre port que vous pouvez configurer dans le ISS pour votre nouveau site)

0
Serge