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
– skirtle, Commented Jan 23, 2020 at 6: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
– tallberg, Commented Jan 23, 2020 at 7:00
But i was able to read just two days back and I'm not able to today. Hows that possible — Vaishali Gojra
– Vaishali Gojra, Commented Jan 23, 2020 at 7:06

Kordik · Accepted Answer · 2020-01-23 14:53:39Z

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, 2020 at 14:53

Kordik

1491 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Vaishali Gojra Over a year ago

Do you get the text of file as output?

Vaishali Gojra Over a year ago

Is the problem with npm version?

Kordik Over a year ago

1.yes 2.I don't use npm I just use that chunk of code

Vaishali Gojra · Accepted Answer · 2020-01-27 09:27:43Z

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, 2020 at 9:27

Vaishali Gojra

791 gold badge1 silver badge12 bronze badges

Collectives™ on Stack Overflow

Error in using Fetch API in Vue JavaScript

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related