Using Nuxt with Axios on Google Firebase hosting

Question

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

Neal Connolly Neal Connolly · Accepted Answer · 2018-07-14T18:06:19

You might want to check your .bash_profile or .profile to make you're not setting a base_url there. Also, depending on your configuration — you may need to rebuild the project on your production environment. e.g npm build

Using Nuxt with Axios on Google Firebase hosting

3 Answers