Vuejs unable to access local json file using axios. 404 (Not Found)

Question

After trying working around it a lot to fetch JSON data from the local file.
Always receiving the following error: GET http://localhost:8080/test.json 404 (Not Found).
The project has been created using vue-cli.

File has been kept under public folder -

File content is -

{
    "content": "SwiftUI was introduced in iOS 13 in a time many of us have a big app built with UIKit. SwiftUI"
}

Template -

<template>
  <div>
    {{blogcontent.content}}
  </div>
</template>

Script -

<script>
 
import axios from "axios";
const ax = axios.create({
  baseURL: "http://localhost:8080/",
});

export default {
  name: "BloePage",
  data() {
    return {
      blogcontent: { content: "Loading..." },
    };
  },
  mounted() {

    let url = "test.json";
    ax.get(url)
      .then((response) => {
        this.blogcontent = response;
        console.log(response);
      })
      .catch((err) => {
        console.log(err);
      });
  }
};
</script>

So the page loads correctly at http://localhost:8080/index.html ? — Jaromanda X
– Jaromanda X, Commented Sep 23, 2020 at 4:29
@JaromandaX it's loading correctly. just received this error message, because it was unable to find json file locally. — Kiran Jasvanee
– Kiran Jasvanee, Commented Sep 23, 2020 at 4:31
and if you point your browser to http://localhost:8080/test.json this also works? — Jaromanda X
– Jaromanda X, Commented Sep 23, 2020 at 4:32
@JaromandaX nothing happens. Loading home screen. but if I'm using relative path with import, its working fine. Which I don't want. I need to keep that file name dynamic in future. — Kiran Jasvanee
– Kiran Jasvanee, Commented Sep 23, 2020 at 4:34
when running the serve script, you can usually use one of two addresses, http://localhost:8080/ or http://x.x.x.x:8080/ ... where the x.x.x.x is your computers IP address ... have you tried both? — Jaromanda X
– Jaromanda X, Commented Sep 23, 2020 at 4:34

Ali Azimi · Accepted Answer · 2020-09-23 06:03:11Z

1

I have just edited this part of your code:

this.blogcontent.content = response.data.content;

and it works fine

<template>
  <div>
    {{blogcontent.content}}
  </div>
</template>

<script>
 
import axios from "axios";
const ax = axios.create({
  baseURL: "http://localhost:8080/",
});

export default {
  name: "BloePage",
  data() {
    return {
      blogcontent: { content: "Loading..." },
    };
  },
  mounted() {

    let url = "test.json";
    ax.get(url)
      .then((response) => {
        this.blogcontent.content = response.data.content;
        console.log(response.data.content);
      })
      .catch((err) => {
        console.log(err);
      });
  }
};
</script>

answered Sep 23, 2020 at 6:03

Ali Azimi

4144 silver badges18 bronze badges

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

1 Comment

Ali Azimi Over a year ago

@kiran_jasvanee Please mark my answer as correct answer if it solved you problem.

Collectives™ on Stack Overflow

Vuejs unable to access local json file using axios. 404 (Not Found)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related