尝试从本地文件获取 JSON 数据时获取语法错误 [重复]

Question

尝试从本地文件获取 json 数据并继续获取

“JSON.parse：数据意外结束在第 1 行第 1 列” 。

我已经尝试了fetch函数的许多参数，但是我总是得到至少一个错误。

    function getData() {
      fetch('./data.json', {mode: 'no-cors'})
      .then((res) => res.json())
      .then((data) => {
        console.log(data);
      })
    };

JSON数据

{
  "CustomerJohn": [
    {
      "month": "April",
      "transaction": 1,
      "price": 57
    },
    {
      "month": "April",
      "transaction": 2,
      "price": 89
    },
    {
      "month": "May",
      "transaction": 1,
      "price": 163
    },
    {
      "month": "May",
      "transaction": 2,
      "price": 43
    },
    {
      "month": "May",
      "transaction": 3,
      "price": 221
    },
    {
      "month": "June",
      "transaction": 1,
      "price": 99
    },
    {
      "month": "June",
      "transaction": 2,
      "price": 201
    }
  ]
}

我想安慰你。记录数据以确保其正常运行。

Answer 1

您总是会得到错误Fetch API无法加载文件：///C：/your/path/to/data.json.不支持URL方案“文件”。如果您使用获取来检索未运行服务器的本地文件，即通过file：///协议而不是超文本传输协议：//或https：//访问JSON文件。

为了访问它，您必须处于某种服务器环境中，并且可以使用XMLHttpRequest检索数据。我为您准备了以下工作代码：

// Method which actually read json using XMLHttpRequest and promise
const jsonFileReader = async path => {
    return new Promise((resolve, reject) => {

        const request = new XMLHttpRequest();
        request.open('GET', path, true);
        request.responseType = 'blob';

        request.onload = () => {
          const reader = new FileReader();

          reader.onload = e => resolve(e.target.result);
          reader.onerror = err => reject(err);
          reader.readAsDataURL(request.response);
        };

        request.send();
    });
}

// This mthod will return the JSON
const returnJsonData = async (url) => {
    const jsonData = await jsonFileReader(url);
    console.log('Here is your JSON data: => ', jsonData);
    return jsonData;
}

// Calling the function where you put URL
returnJsonData('./file.json');

此外，如果您没有在服务器上运行此代码，您将得到以下错误，访问XMLHttpRequest at'file：///C：/your/path/to/data.json'from源'null'已被CORS策略阻止：跨源请求仅支持协议方案：超文本传输协议、数据、chrome、chrome-扩展、https。

原因再次是协议和跨域问题，它限制了您访问该文件。

所以即使你的文件来源于同一个主机(localhost)，但是只要方案不同(http / file)，它们就被当作不同的来源。

如何在 Node 中创建快速服务器.js

1. 通过键入npm install-g超文本传输协议-server
安装超文本传输协议-server
2. 切换到您的工作目录，yoursome.html所在的位置
3. 通过发出超文本传输协议-server-c-1
来启动您的超文本传输协议服务器

这将运行一个 Node.js httpd，它将目录中的文件作为静态文件提供，可从 http://localhost:8080