在 Vue JavaScript 中使用 Fetch API 时出错答案

【问题标题】：Error in using Fetch API in Vue JavaScript在 Vue JavaScript 中使用 Fetch API 时出错
【发布时间】：2020-01-27 17:27:43
【问题描述】：

我使用下面的代码通过fetch读取文件：

fetch('rest.txt', {mode: 'no-cors'})
      .then(response => response.text())
      .then(data=> console.log(data));

在浏览器控制台中，我得到以下响应而不是文件文本。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="./static/favicon.ico"/>
    <title>TRAINSET</title>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-91042619-2"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-91042619-2');
    </script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/app.js"></script></body>
</html>
<style>
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}
</style>

我昨天尝试了同样的事情，效果很好，但今天不行。

有人可以帮我解决这个问题吗？

【问题讨论】：

错误是什么？
如果您尝试通过在浏览器的地址栏中输入 URL 来直接检索文件会怎样？
我猜“不支持 URL 方案“文件”。”您需要在 Web 服务器上运行该站点，而不能只在浏览器中打开该文件。
但是两天前我还能够阅读，而今天却无法阅读。怎么可能
你可以添加“catch()”并显示什么错误。

标签： javascript vue.js fetch vue-component fetch-api

【解决方案1】：

奇怪，我直接复制了那个代码并用 http-server 运行

  fetch('/rest.txt', {mode: 'no-cors'})
      .then(response => response.text())
      .then(data=> console.log(data));

它可以工作

您能否显示使用该代码的所有上下文？

【讨论】：

你得到文件的文本作为输出吗？
是npm版本的问题吗？
1.是 2.我不使用 npm 我只是使用那段代码

【解决方案2】：

只需添加 var customData = require('./rest.txt'); 在开始。它为我解决了这个问题。没有这个，如果它在服务器上运行，则 fetch 将不会运行。如果没有服务器运行，那么 fetch 将在没有这个的情况下工作。

【讨论】：