Error in using Fetch API in Vue JavaScript

Question

I use the following code to read a file using fetch:

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

And in the browser console I get the following response instead of the text of the file.

<!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>

I tried the same thing yesterday and it worked fine but today it doesn't.

Can someone please help me with this?

What happens if you try to retrieve the file directly by typing the URL into the browser's address bar? — skirtle, Jan 23 '20 at 06:48
I'm guessing "URL scheme "file" is not supported." you need to run the site on a web server, you cannot just open the file in a browser. — tallberg, Jan 23 '20 at 07:00
But i was able to read just two days back and I'm not able to today. Hows that possible — Vaishali Gojra, Jan 23 '20 at 07:06
There are no errors . I want context of file in the console but instead I'm getting above response. — Vaishali Gojra, Jan 23 '20 at 08:06

score 1 · Answer 1 · answered Jan 23 '20 at 14:53

1

Strange, I've copied directly that code and run with http-server

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

and it works

Can you show all the context where that code is used?

answered Jan 23 '20 at 14:53

Kordik

129
1
3

Do you get the text of file as output? – Vaishali Gojra Jan 24 '20 at 04:52
Is the problem with npm version? – Vaishali Gojra Jan 24 '20 at 04:53
1.yes 2.I don't use npm I just use that chunk of code – Kordik Jan 24 '20 at 11:59

score 1 · Accepted Answer · answered Jan 27 '20 at 09:27

1

Just add var customData = require('./rest.txt'); in the starting. It solved the problem for me. Without this, fetch will not run if it's running on server. Without server running, fetch will work without this.

answered Jan 27 '20 at 09:27

Vaishali Gojra

69
1
10

Error in using Fetch API in Vue JavaScript

2 Answers2