fetch 通过fetchAPI 则提示 Not allowed to load local resource

在浏览器中，Fetch API是遵循同源策略（Same-Origin Policy）的，它只能用于访问同一域名下的资源。如果试图通过Fetch API访问本地文件，或者跨域访问其他域名下的资源，就会出现"Not allowed to load local resource"或"CORS error"等错误。

如果要通过Fetch API访问本地文件，可以使用`file`协议来访问，例如：

fetch('file:///path/to/file')
  .then(response => response.text())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

在上面的代码中，`fetch()`方法会使用`file`协议访问本地文件，并返回一个Promise对象。在Promise对象的回调函数中，使用`response.text()`方法将响应体解析为文本格式，并获取到文件内容进行处理。

需要注意的是，如果使用`file`协议访问本地文件，可能会遇到一些限制和安全问题，如不能直接访问C盘根目录、不能访问其他用户的文件等。因此，在实际开发中，应该尽量避免使用`file`协议，而是将文件上传到服务器，通过HTTP协议访问。

相关问题

Not allowed to load local resource: file:///E:/project/bird_visual/echarts/data.json Uncaught (in promise) TypeError: Failed to fetch

这个问题可能是由于您尝试从本地加载数据文件而导致的。通常，现代的 Web 浏览器不允许 JavaScript 直接从本地硬盘上加载文件，因为这可能会导致安全风险。您可以尝试将数据文件上传到 Web 服务器上，并从 Web 服务器上加载数据文件。如果您已经将数据文件上传到 Web 服务器上，那么可能是您的代码有错误或配置问题。请仔细检查您的代码和服务器配置，并确保正确地加载数据文件。

fetch 请求not allowed by access-control-origin

该错误是由于浏览器的同源策略所导致的。同源策略是浏览器的一种安全机制，它限制了一个源加载的文档或脚本如何与来自另一个源的资源进行交互。当你在前端使用 fetch 请求后端接口时，如果后端接口的域名和前端页面的域名不同，就会出现这个错误。

解决这个问题的方法有两种：
1. 在后端接口中设置 Access-Control-Allow-Origin 头部，允许前端页面的域名访问该接口。例如，在 Node.js 中可以使用 cors 模块来实现：

   const cors = require('cors');
   const express = require('express');
   const app = express();
   
   app.use(cors({
     origin: 'http://localhost:3000'
   }));
   
   app.get('/api/data', (req, res) => {
     // 返回数据
   });
   
   app.listen(8080);

2. 在前端请求中添加 mode: 'no-cors'，这样浏览器就会发送一个“不透明”的请求，不会检查响应的内容类型和头部信息。但是，这种方法只适用于 GET 和 POST 请求，并且无法访问响应的内容。

   fetch('http://example.com/api/data', {
     method: 'POST',
     mode: 'no-cors',
     headers: {
       'Content-Type': 'application/json'
     },
     body: JSON.stringify(data)
   }).then(response => {
     // 处理响应
   }).catch(error => {
     // 处理错误
   });