Issues with Functions using wrong url/port in Nuxt

Support
1

I’m having issues with calling my functions on both localhost with Netlify dev and when deployed.

In Vue/Nuxt this is how I’m calling the function:

async getInstagramPhotos()
    const instagram = await this.$axios.$get('/.netlify/functions/instagram')
    this.instagramData = instagram.data;
}

However I get the following error on local:

Screen Shot 2020-06-12 at 5.07.10 PM
Screen Shot 2020-06-12 at 5.07.10 PM725×36 8.48 KB

It seems that the Nuxt server is being hosted on 3000, the Netlify server on 8000 and when accessing localhost:8000 it still tries to request the function from 3000? Additionally, when the site is deployed it still seems to be trying to access the function from http://localhost:8888/.netlify/functions/instagram, which doesn’t seem right at all…

When accessing the function directly at localhost:8000/.netlify/functions/instagram or https://destination-waiheke.netlify.app/.netlify/functions/instagram, it works perfectly fine, it just seems to be a routing issue maybe?

Thanks

2

Managed to figure it out, having the axios config in nuxt.config.js with the baseURL as / seems to solve this:

axios: {
    baseURL: '/',
},
1 Like