Nuxt.js + Express + Heroku — Axios 请求在生产环境中返回 404，但在开发模式下不在本地主机上 — 有什么解决方案吗？

Question

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.

It works fine when I run it locally , but when I deploy the site on heroku the axios requests all return 404.

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.

I've tried setting the baseURL to the url of the site, I've tried setting it to http://0.0.0.0:8000 , which is mentioned in the nuxt.js docs

I've tried including the modeule @nuxtjs/dotenv with require('dotenv').config() at the top of my nuxt.config.js file.

My nuxt.config.js file

    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 && ctx.isClient) {
            config.module.rules.push({
              enforce: 'pre',
              test: /\.(js|vue)$/,
              loader: 'eslint-loader',
              exclude: /(node_modules)/,

              options : {
                    fix : true,
                    extractCSS : true
                }
            })
          }
        }
      }
    }

my server/index.js file

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()

An example of one of the axios routes that queries the database.

  app.get("/api/posts/latest-post", async (req, res) => {
    try {
              var result = await PostModel.findOne({published:true}).sort({"date.published.iso": -1}).exec();
              res.send(result);
          } catch (error) {
              res.status(500).send(error);
      }
  });

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.

It works exacltly as expected on local host.

Any help would be really appreciated.

Answer 1

You can create a new instance of axios with a custom config, like this: axios.create([config]) ->this is the sample //code starts

const instance = axios.create({
  baseURL: 'https://www.abcdxyz.com/api/',// as you used http://0.0.0.0:8000
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'} // if you like to send details else remove it
});

//code ends You can also use Axios inline but I prefer an extra utils folder and then a new file named 'axiosconfig' and just import it... helps in the MVC

I hope my answer was helpful to you!