title: 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
body: <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>