Search code examples
firebasevue.jsaxiosfirebase-hostingnuxt.js

Using Nuxt with Axios on Google Firebase hosting


Everything works fine except when deployed to Firebase hosting, the axios baseURL and/or proxy default to local. They seem to ignore the values set in the nuxt.config.js and thus result in 404's.

If I hardcode my URL's all API calls work fine, but I'd like to avoid that.

What should I change in order for my Nuxt SSR API calls to work in production (firebase hosting) with my own defined baseURL and proxy, just as in development?

nuxt.config.js

axios: {
    proxy: true,
    baseURL: 'http://staging.unicorns.com',
    browserBaseURL: '/api'
},
proxy: {
    '/api': 'http://staging.unicorns.com'
},

e.g.

API call in development:

GET http://staging.unicorns.com/api/users 200

API call in production (wrong url):

GET http://unicorns-staging.firebaseapp.com/api/users 404


Solution

  • It turned out to be to proxy. Turning it off resolved the issue.

    Have since moved over to Heroku as Firebase didn't support latest node / nuxt (edge)