Vue Router interfering with Javascript fetch

Question

I'm trying to use fetch in my Vue 2 project, but when I try to access file.json in the root directory, it instead loads the index.html every time! I have a strong feeling it's Vue router's fault.

So how can I prevent Vue router from redirecting my fetches???

Here is my router.js:

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Group from "../views/Group.vue";
import Computer from "../views/Computer.vue";
import NoComputer from "../views/NoComputer.vue";
import Error404 from "../views/404.vue";

Vue.use(VueRouter);

const routes = [
{
  path: "/",
  name: "Home",
  component: Home
},
{
  path: "/group/:group",
  component: Group,
  props: true,
  children: [
  { path: '', component: NoComputer },
  {
    path: 'computer/:com',
    component: Computer,
    props: true,
  }
  ]
},
// always at bottom of list
{ path: '*', component: Error404 }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;

And here is my fetching:

async getComputers() {
    var res = await fetch("/file.json", {
        method: 'GET',
        cache: 'no-cache',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json'
        },
        redirect: 'error',
    });
    console.log(res.json());
},

Thanks for advice!

score 1 · Accepted Answer · answered Mar 08 '21 at 07:33

This isn't a Vue Router issue. Vue CLI uses Webpack's devServer, which enables historyApiFallback. That returns index.html in place of any 404 responses. The index.html response implies the resource you requested (file.json) does not exist at the specified path.

If file.json is a static asset, ensure it exists in the public directory (i.e., at the root of it for /file.json to be found).

Vue Router interfering with Javascript fetch

1 Answers1