[FIXED] Why would nuxt axios be calling the wrong server middleware API?

Issue

I recently split my Nuxt API into several files for easy management. However, it seems that when I make my calls, it sometimes calls into the wrong file.

In my nuxt.config.js, I have

serverMiddleware:[
    {path:"/user-api",handler:"~/api/user.js"},
    {path:"/blog-api",handler:"~/api/blog.js"},
    {path:"/calendar-api",handler:"~/api/calendar.js"},
    {path:"/gallery-api",handler:"~/api/images.js"},
    {path:"/product-api",handler:"~/api/product.js"},
    {path:"/video-api",handler:"~/api/video.js"},
    {path:"/printful-api",handler:"~/api/printful.js"},
    {path:"/review-api",handler:"~/api/reviews.js"},
    {path:"/email-api",handler:"~/api/email.js"},
    {path:"/search-api",handler:"~/api/search.js"},
    {path:"/requirement-api",handler:"~/api/requirements.js"},
  ]

Then when I load in my desired page

this.video = await this.$axios.$get('/video-api/title',{params:{title:this.$route.params.title}})

It ends up calling the wrong file:

  Error... at async api\requirements.js:55:12

Any reason why it would be doing this?

Solution

It appears that simply having the same end path causes it confusion. Changing the call (and api obviously) to

this.video = await this.$axios.$get('/video-api/videotitle',{params:{title:this.$route.params.title}})

so that the final part of the call is unique, fixes the problem. Can't say it's ideal, but it does work. I found this out because it also had other problems mixing up blog-api/title as well

Answered By - awsirkis

Answer Checked By - Timothy Miller (PHPFixing Admin)