Fetch API 无法加载 file:///C:/Users/Jack/Desktop/Books_H/book-site/public/api/books。对于 CORS 请求，URL 方案必须是
Posted
技术标签:
【中文标题】Fetch API 无法加载 file:///C:/Users/Jack/Desktop/Books_H/book-site/public/api/books。对于 CORS 请求，URL 方案必须是“http”或“https”【英文标题】：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 【发布时间】：2018-07-21 13:15:11 【问题描述】：刚开始在我的学校学习node js。他们给了我们这个半成品的任务，我需要让下一个和上一个按钮工作。但是，当我运行 index.html 时，我在控制台中遇到了一些错误。错误是：
“。”
另一个是：
“未捕获（承诺中）类型错误：无法在 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.
*/
【问题讨论】：
不要从文件浏览器打开你的文件，而是用 localhost:8080 打开它 浏览器不允许带有 ajax 调用的file:// URL（出于安全原因）。您需要通过 Web 服务器加载您的网页，并使用 http:// 或 https://，而不是 file://，通过该 Web 服务器发出您的 ajax 请求。
You can get file:// to work and there is a way without using a server
【参考方案1】：
如果这对将来的任何人有帮助，这就是我必须做的。这都是基本的东西，但我是初学者，所以我们开始吧。打开命令提示符。转到项目的目的地（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
之后，我可以在浏览器中运行我的页面，在 URL 中输入 http://localhost:8080/。
【讨论】：
你需要一个节点服务器来调用你计算机中的获取函数吗？我想即使在同一个目录下也不起作用，对吧？ 这里是您所询问主题的链接。它可能会帮助你。 ***.com/questions/50007055/…node server.js internal/modules/cjs/loader.js:985 throw err; ^ 错误：找不到模块 'C:\mywork\GitHub\myProject\server.js' [90m at Function.Module._resolveFilename (internal/modules/cjs/loader.js:982:15)[39m [90m at Function.Module._resolveFilename Module._load (internal/modules/cjs/loader.js:864:27)[39m [90m at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)[39m [90m at internal/ main/run_main_module.js:18:47[39m 代码: [32m'MODULE_NOT_FOUND'[39m, requireStack: [] 【参考方案2】：
添加到脚本标签type='text/javascript'
【讨论】：
【参考方案3】：如果您在 Windows 下，请在本地 IIS 中创建一个新站点（如果尚未在 Windows 组件中启用 IIS）到您的项目文件夹。然后打开http://localhost:8080（或您可以在 ISS 中为您的新站点设置的其他端口）
【讨论】：
以上是关于Fetch API 无法加载 file:///C:/Users/Jack/Desktop/Books_H/book-site/public/api/books。对于 CORS 请求，URL 方案必须是的主要内容，如果未能解决你的问题，请参考以下文章
无法使用 Fetch API 从 localhost 加载 Deezer API 资源
Fetch API 无法加载 webpack://... 错误
Safari：重新加载后“由于访问控制检查而无法加载 Fetch API”