Fetch API cannot load file:///C:/Users/Jack/Desktop/Books_H/book-site/public/api/books. URL scheme must be "http" or "https" for CORS request : <p>Just started learning node js in my school. They gave us this half-finished task and i need to make the next and prev buttons work. However i get some errors in the console the moment i run the index.html. The errors are:</p>

<p>"Fetch API cannot load file:///C:/Users/Jack/Desktop/Books_H/book-site/public/api/books. URL scheme must be "http" or "https" for CORS request." </p>

<p>and the other one is :</p>

<p>"Uncaught (in promise) TypeError: Failed to fetch at HTMLDocument.document.addEventListener".</p>

<p>I dont even know how to start to solve this problem. Any help?</p>

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

    &lt;/table&gt;
    &lt;script src="index.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The java script file</p>

<pre><code>    document.addEventListener("DOMContentLoaded", () =&gt; {
    processResponse(fetch("api/books"));

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

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

});

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

    response.then(data =&gt; data.json())
        .then(value =&gt; {
            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 &lt; 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;
        });
}
</code></pre>

<p>server.js file</p>

<pre><code>    const fs = require('fs');
const express = require('express');
const app = express();

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

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

const apiRouter = express.Router();

apiRouter.get("/books", (req, res) =&gt; {

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

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

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

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

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

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

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

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


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


app.listen(8080, () =&gt; 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 &gt; data Folder &gt; books.json. 
Books &gt; public Folder &gt; index.html. 
Books &gt; public Folder &gt; index.js.
Books &gt; server.js.
*/
</code></pre>
