New to vuejs, completely stumped by this. Here is my config:

export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  server: {
    port: 7000,
    proxy: {
      '/api': {
        target: 'http://localhost:8081/',
        changeOrigin: true
      },
    },
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

Here are my routes so far:

routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/recipes/:id',
      name: 'recipe',
      component: RecipeView
    },
    {
      path: '/about',
      name: 'about',
      component: AboutView
    },
    {
      path: '/recipes/add',
      name: 'recipe-add',
      component: AddRecipe
    },
    {
      path: '/recipes/edit/:id',
      name: 'recipes-edit',
      component: EditRecipe
    }
  ]

All pages load correctly, with home, recipe, add, and edit all make backend calls on onMounted. Home and recipe are making the proper calls, recipe for example:

state.recipes = (await axios.get('api/recipes')).data;

(.png) (http://localhost:7000/api/recipes)

But add and edit are somehow getting part of the route path inserted, add for example:

state.allCategories = (await axios.get('api/categories')).data;

(.png) (http://localhost:7000/recipes/api/categories)

I have no idea why the 'recipes' part is in there on this call. If I change the path in the route to one subdirectory, like 'recipe-add', then the URL is correct and my backend returns data. Any help would be greatly appreciated.

New to vuejs, completely stumped by this. Here is my config:

export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  server: {
    port: 7000,
    proxy: {
      '/api': {
        target: 'http://localhost:8081/',
        changeOrigin: true
      },
    },
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

Here are my routes so far:

routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/recipes/:id',
      name: 'recipe',
      component: RecipeView
    },
    {
      path: '/about',
      name: 'about',
      component: AboutView
    },
    {
      path: '/recipes/add',
      name: 'recipe-add',
      component: AddRecipe
    },
    {
      path: '/recipes/edit/:id',
      name: 'recipes-edit',
      component: EditRecipe
    }
  ]

All pages load correctly, with home, recipe, add, and edit all make backend calls on onMounted. Home and recipe are making the proper calls, recipe for example:

state.recipes = (await axios.get('api/recipes')).data;

(https://i.sstatic/AsFdzc8J.png) (http://localhost:7000/api/recipes)

But add and edit are somehow getting part of the route path inserted, add for example:

state.allCategories = (await axios.get('api/categories')).data;

(https://i.sstatic/H3PrHdjO.png) (http://localhost:7000/recipes/api/categories)

I have no idea why the 'recipes' part is in there on this call. If I change the path in the route to one subdirectory, like 'recipe-add', then the URL is correct and my backend returns data. Any help would be greatly appreciated.

• vue.js
• vuejs3

1 Answer 1

Request URLs are relative to page base URL, unless Axios baseURL option is specified.

As a rule of thumb, absolute paths need to be used for requests like /api/categories, not relative like api/categories.