当前位置: 首页 > 面试题库 >

提取API无法加载file:/// C:/ Users / Jack / Desktop / Books_H / book-site / public / api / books。URL方案必须为“ http”或“ https”才能进行CORS请求

钱跃
2023-03-14
问题内容

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

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

另一个是:

“未捕获(承诺)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

之后,我可以在浏览器中运行我的页面,在URL中键入http:// localhost:8080 /。



 类似资料:
  • 如果您只在本地运行html文件(Fetch API无法将URL方案加载为CORS请求的“超文本传输协议”或“https”。)我得到了这样的错误代码:如何尝试在本地运行它而不会出错? 代码是(包括许可证。 请告诉我在本地主机上使用它的权限,而不是http或https 请告诉我这个权限,如何做,如何使用hdf5制作模型

  • 我试图在本地主机上使用,但它不起作用。 以下是我的代码: 嗨.txt文件与脚本文件位于同一文件夹中。 控制台中显示以下错误: (~~~)是路径

  • 我在获取API时遇到了一些问题。当我启动这段代码时: 从 http://quenouillere.fr/,它可以毫无问题地工作。但是当我想从 https://quenouillere.fr/ 使用它时,它不适用于CORS问题。它检测到源不一样(因为是http谁发起请求,https谁接收它)我在互联网上搜索,但似乎没有人有这个问题。 https上的CORS问题 谢谢你提前的回答:)

  • 我们已经在azure上部署了api,并试图在我们用角5编写的Web应用程序中使用。但是,当我们尝试使用api时,我们会遇到以下错误。 Chrome混合内容:https://somedevapp.azurewebsites.net/#/managesomething的页面是通过HTTPS加载的,但请求了不安全的XMLHttpRequestendpointhttp://admindevapp.azur

  • 我已经在我的ASP中启用了CORS。NET MVC API,使用以下代码: 我尝试从API获取数据,打开localhost:6320/API/users,它工作了,我获取了所有数据。现在,当我尝试从Angular 7应用程序获取数据时,数据未加载,出现错误 “访问位于的XMLHttpRequest”http://localhost:6320/api/users“起源”http://localhos

  • 我正在使用CakePHP3开发RESTAPI。我想公开启用它,这样任何人都可以调用API。因此,我添加了如下定义的cors标题:http://book.cakephp.org/3.0/en/controllers/request-response.html#setting-跨源请求头 我已经在Dispatcher上实现了EventListener。在调度和调度之前。发货前,准备cors标题。 但问