Question

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

在本地运行时效果很好，但是当我在heroku上部署站点时，axios请求所有返回404。

我的猜测是axios请求baseURL某种程度上是错误的，但是当我无法确认这一点时。我很困惑。

我尝试将baseURL设置为网站的url，我尝试将其设置为<ul> <li id='li_Menu_1'><a href='#'>Item 1</a></li> <li id='li_Menu_2'><a href='#'>Item 2</a></li> <li id='li_Menu_3'><a href='#'>Item 3</a></li> </ul> <div id='div_MenuDetail' style='display:none;'> bla bla bla.... </div>，这在nuxt.js docs

中已提到

我已经尝试在nuxt.config.js文件的顶部包含http://0.0.0.0:8000和@nuxtjs/dotenv模版。

我的nuxt.config.js文件

require('dotenv').config()

我的服务器/index.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
                }
            })
          }
        }
      }
    }

其中一个查询数据库的axios路由的示例。


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

这里的示例应该返回最新的帖子，相反，我收到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中有帮助

我希望我的回答对您有所帮助！

Nuxt.js + Express + Heroku-Axios请求在生产环境中返回404，但不在开发人员模式下的localhost上返回-任何解决方案？

1 个答案: