title: Nuxt.js + Express + Heroku — Axios requests return 404 in production, but not on localhost in dev mode — any solution?
body: <p>I've made a cms for blogging using nuxt.js with express for the server. It uses axios to make asyncData requests to the server before loading each page.</p>
  
  <p><strong>It works fine when I run it locally</strong>, but when I deploy the site on heroku the axios requests all return 404.</p>
  
  <p>My guess is that the axios requests baseURL is wrong somehow, but when I haven't been able to confirm that. I've confused myself.</p>
  
  <p>I've tried setting the baseURL to the url of the site, I've tried setting it to <code>http://0.0.0.0:8000</code>, which is mentioned in the <a href="https://nuxtjs.org/api/configuration-server/" rel="nofollow noreferrer">nuxt.js docs</a></p>
  
  <p>I've tried including the modeule <code>@nuxtjs/dotenv</code> with <code>require('dotenv').config()</code> at the top of my nuxt.config.js file.</p>
  
  <p>My nuxt.config.js file</p>
  
  <pre><code>
      module.exports = {
        mode: 'universal',
  
        head: {
          title:'',
          meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            { hid: 'description', name: 'description', content:'' }
          ],
          link: [
            { rel: 'icon', type: 'image/x-icon', href: '/favicon.png' }
          ]
        },
  
        loading: { color: '#fff' },
  
        css: [
          { src: '~assets/stylesheets/global.scss', lang: 'scss' }
        ],
  
        plugins: [
        ],
        /*
        ** Nuxt.js modules
        */
        modules: [
          '@nuxtjs/axios',
          '@nuxtjs/eslint-module'
        ],
  
        axios: {
  
        },
  
        build: {
          /*
          ** You can extend webpack config here
          */
          extend(config, ctx) {
            // Run ESLint on save
            if (ctx.isDev &amp;&amp; ctx.isClient) {
              config.module.rules.push({
                enforce: 'pre',
                test: /\.(js|vue)$/,
                loader: 'eslint-loader',
                exclude: /(node_modules)/,
  
                options : {
                      fix : true,
                      extractCSS : true
                  }
              })
            }
          }
        }
      }
  
  </code></pre>
  
  <p>my server/index.js file</p>
  
  <pre><code>
  const express = require('express')
  const session = require('express-session')
  const consola = require('consola')
  const passport = require('passport')
  const mongoose = require("mongoose")
  const bodyParser = require("body-parser")
  const cookieParser = require('cookie-parser')
  const morgan = require('morgan')
  const { Nuxt, Builder } = require('nuxt')
  
  const app = express()
  
  
  // Import and Set Nuxt.js options
  let config = require('../nuxt.config.js')
  config.dev = !(process.env.NODE_ENV === 'production')
  
  //Body Parser / Cookie Parser config
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({ extended: true }));
  app.use(cookieParser())
  
  app.use(morgan('dev'));
  
  // Expresss Session
  app.use(session({
    secret: 'lkasjdlmsdj18ka124jlsdalkjmlakjc',
    resave: false,
    saveUninitialized: false,
    cookie: { maxAge: 60000 }
  }))
  app.use(passport.initialize())
  app.use(passport.session())
  
  mongoose.connect(process.env.MONGODB_URI);
  
  require('./auth_config')(passport)
  require('./auth')(app,passport)
  
  //Posts
  require('./posts.js')(app, mongoose)
  
  
  async function start() {
  
    // Init Nuxt.js
    const nuxt = new Nuxt(config)
  
    const { host, port } = nuxt.options.server
  
  
  
    // Build only in dev mode
    if (config.dev) {
      const builder = new Builder(nuxt)
      await builder.build()
    } else {
      await nuxt.ready()
    }
  
  
    // Give nuxt middleware to express
    app.use(nuxt.render)
    // Listen the server
    app.listen(port, host)
    consola.ready({
      message: `Server listening on http://${host}:${port}`,
      badge: true
    })
  }
  start()
  
  </code></pre>
  
  <p>An example of one of the axios routes that queries the database.</p>
  
  <pre><code>  app.get("/api/posts/latest-post", async (req, res) =&gt; {
      try {
                var result = await PostModel.findOne({published:true}).sort({"date.published.iso": -1}).exec();
                res.send(result);
            } catch (error) {
                res.status(500).send(error);
        }
    });
  
  </code></pre>
  
  <p>The example here should return the latest post, instead I get an nuxt error message "server error." The same is true for every route that uses axios to request data from the server.</p>
  
  <p>It works exacltly as expected on local host.</p>
  
  <p>Any help would be really appreciated.</p>