node.js - Nuxt.js + Express + Heroku — Axios 请求在生产中返回 404，但在开发模式下不在 localhost 上返回 — 有什么解决方案吗？

Question

我使用 nuxt.js 和 Express 为服务器制作了一个用于博客的 cms。它在加载每个页面之前使用 axios 向服务器发出 asyncData 请求。

当我在本地运行它时工作正常，但是当我在heroku上部署网站时，axios请求全部返回404。

我的猜测是 axios 请求的 baseURL 不知何故是错误的，但当我无法确认这一点时。我自己都糊涂了。

我尝试将 baseURL 设置为网站的 url，我尝试将其设置为 http://0.0.0.0:8000，这在 nuxt.js docs 中提到过。

我尝试在 nuxt.config.js 文件顶部包含带有 require('dotenv').config() 的模块 @nuxtjs/dotenv .

我的 nuxt.config.js 文件

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

我的服务器/index.js 文件

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

查询数据库的 axios 路由之一的示例。

  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);
      }
  });

这里的示例应该返回最新的帖子，但我收到了 nuxt 错误消息“服务器错误”。每个使用axios向服务器请求数据的路由也是如此。

它在本地主机上完全按照预期工作。

任何帮助将不胜感激。

Answer 1

您可以使用自定义配置创建 axios 的新实例，如下所示:axios.create([config]) ->这是示例//代码开始

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
});

//代码结束您还可以使用 Axios 内联，但我更喜欢一个额外的 utils 文件夹，然后是一个名为“axiosconfig”的新文件，然后导入它...有助于 MVC

希望我的回答对您有帮助!