web-dev-qa-db-ja.com

Fetch APIはfile：/// C：/ Users / Jack / Desktop / Books_H / book-site / public / api / booksを読み込めません。 CORSリクエストの場合、URLスキームは「http」または「https」である必要があります

私の学校でノードjsを学び始めました。彼らは私たちにこの半分完成したタスクを与えました、そして私は次へと前へボタンが機能するようにする必要があります。ただし、index.htmlを実行した瞬間にコンソールにエラーが表示されます。エラーは次のとおりです。

「Fetch APIはfile：/// C：/ Users/Jack/Desktop/Books_H/book-site/public/api/booksをロードできません。CORSリクエストの場合、URLスキームは「http」または「https」である必要があります。

もう1つは：

「キャッチされていない（約束どおり）TypeError：HTMLDocument.document.addEventListenerでのフェッチに失敗しました」。

私はこの問題を解決し始める方法すら知りません。何か助けは？

    <!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>

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;
        });
}

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

まあ、これが将来的に誰かを助ける場合に私がしなければならなかったことです。これはすべて基本的なものですが、私は初心者なのでここに行きます。コマンドプロンプトを開きます。プロジェクトの宛先（index.jsファイルがある場所）に移動して、次のように記述します。

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

次に、server.jsファイルの宛先に移動して、

$ node server.js

この後、ブラウザで http：// localhost：8080 / と入力してページを実行できます。

14
Happy Coconut

Windowsを使用している場合は、ローカルに新しいサイトを作成しますIIS（まだWindowsコンポーネントでIISを有効にしている場合は有効にする必要があります））。次に、オープン http：// localhost：808 （または、ISS新しいサイト用にセットアップできる他のポート）

0
Serge