gpt4 book ai didi

javascript - Fetch API 无法加载文件 :///C:/Users/Jack/Desktop/Books_H/book-site/public/api/books. 对于 CORS 请求,URL 方案必须是 "http"或 "https"

转载 作者:太空狗 更新时间:2023-10-29 14:07:42 28 4
gpt4 key购买 nike

刚开始在我的学校学习 node js。他们给了我们这个半完成的任务,我需要让下一个和上一个按钮起作用。但是,当我运行 index.html 时,控制台出现了一些错误。错误是:

“获取 API 无法加载文件:///C:/Users/Jack/Desktop/Books_H/book-site/public/api/books。对于 CORS 请求,URL 方案必须是“http”或“https”。”

另一个是:

“未捕获( promise )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.
*/

最佳答案

好吧,如果它对将来的任何人都有帮助,这就是我必须做的。这是所有基本的东西,但我是初学者所以我们开始吧。打开命令提示符。转到项目的目的地(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/ 运行我的页面在 URL 中。

关于javascript - Fetch API 无法加载文件 :///C:/Users/Jack/Desktop/Books_H/book-site/public/api/books. 对于 CORS 请求,URL 方案必须是 "http"或 "https",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48728334/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com