如何通过javascript从html页面中的特定github txt文件中获取数据

Posted 2023-03-04

【中文标题】如何通过javascript从html页面中的特定github txt文件中获取数据

【英文标题】：How to fetch data from a particular github txt file in html page via javascript

【发布时间】：2020-11-17 17:40:18

【问题描述】：

我要获取这个urlhttps://github.com/ProjectSakura/OTA/blob/10/changelog/changelog_beryllium.txt#L2的数据

我正在尝试使用 fetch api 来获取数据，但我得到了 cors 错误

这就是我想要做的事情

async function showmodal1() 
    console.log("hello")
    const data = await 
                 fetch('https://github.com/ProjectSakura/OTA/blob/10/changelog/changelog_beryllium.txt');
    console.log(data)

showmodal1();

有没有办法获取github txt文件的数据 我试图通过互联网找到这个，但我找不到任何东西 提前感谢您的帮助

编辑：

Access to fetch at 'https://github.com/ProjectSakura/OTA/blob/10/changelog/changelog_beryllium.txt' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. changelog.html:361 
GET https://github.com/ProjectSakura/OTA/blob/10/changelog/changelog_beryllium.txt net::ERR_FAILED
showmodal1 @ changelog.html:361
(anonymous) @ changelog.html:365
dispatch @ jquery.min.js:3
r.handle @ jquery.min.js:3
changelog.html:364 

Uncaught (in promise) TypeError: Failed to fetch

这是错误日志

编辑2：

Promises/Fetch in javascript: how to extract text from text file

Reading code from GitHub as text (raw) in a web page

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

这是我在写问题之前发现的链接

【问题讨论】：

我不知道这个问题有什么问题值得-1分:(

如果您想要我的支持，请显示研究。

已编辑先生，我比较新，所以我不知道如何提出好的问题，谢谢你指导我@AaronBell

【参考方案1】：

您的代码是从与“http://github.com”不同的“http://127.0.0.1:5500”部署的，并且被CORS（在现代浏览器上启用）阻止默认）。您需要将特定标头添加到您的开发服务器。

Access-Control-Allow-Origin 标头中的 * 允许与任何（通配符）域进行通信。

示例：

  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
  "Access-Control-Allow-Headers": "X-Requested-With, Content-Type, Authorization"

还有一些浏览器扩展可以“取消阻止”CORS，但会被认为是不利的。

编辑：

也获取raw 源。该 URL 可通过单击您在请求中尝试访问的 URL 上的原始按钮获得。

编辑2： 这是可以工作的代码

const url1 = 'https://raw.githubusercontent.com/ProjectSakura/OTA/10/changelog/changelog_beryllium.txt'
const response = await fetch(url1);
const data = await response.text();
console.log(data);

【讨论】：

我很确定提出问题的人无权修改 GitHub 服务器上的这些设置。

原始 url 返回 Access-Control-Allow-Origin: *

我实际上知道 cors 我只是想从 github 公共存储库中获取数据我现在将编辑问题我不确定你想说什么@Fullslack.dev 但我想你明白了我的问题你知道方法吗

好吧，让我尝试从原始来源获取数据：D @MaxGDN

如果您有类似节点的服务器，您可以使用node-fetch 或axios 获取节点的信息。你也可以使用puppeteer 然后阅读它。我想不出在浏览器中绕过 CORS 的方法。

【参考方案2】：

在客户端，您将无法获取 GitHub 文本文件，因为浏览器会强制执行跨浏览器源策略作为安全措施。您的源本身必须设置相关的 CORS 标头以允许这样做。但是，您可以从服务器端执行此操作。使用 express 创建一个如下所示的节点服务器，然后尝试从您自己的服务器访问数据。

server.js

const express = require('express');
const cors = require('cors');
const fetch = require('node-fetch');

const app = express();
app.use(cors());

app.get('/txt_response', async (req, res) => 
    const resp = await fetch('https://github.com/ProjectSakura/OTA/blob/10/changelog/changelog_beryllium.txt');
    const textResp = await resp.text();
    res.json(textResp);
);

app.listen('9000');

现在您可以使用http://localhost:9000/txt_response 作为端点来查询客户端代码中的数据。

【讨论】：

好吧，我一直在寻找可以在客户端工作的东西，但我理解这一点并在代码中实现，它有效，谢谢你的帮助但我们需要使用原始文件而不是 github repo @MaxGDN 如下所述的链接

【参考方案3】：

查看here 并向下滚动到“供应请求选项”：

fetch(
      'https://github.com/ProjectSakura/OTA/blob/10/changelog/changelog_beryllium.txt', 
      
        mode: 'no-cors'
      
)

【讨论】：

这行不通我试过了，我们必须使用@MaxGDN 如下所述的原始文件