CODEWITHSUNDEEP
javascriptfetch-api
Vaishali Gojra
Vaishali Gojra

Reputation: 79

Error in using Fetch API in Vue JavaScript

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?

Upvotes: 1

Views: 1278

Answers (2)

Vaishali Gojra
Vaishali Gojra

Reputation: 79

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.

Upvotes: 1

Kordik
Kordik

Reputation: 149

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?

Upvotes: 1

Related Questions