Nuxt + Axios作为插件请求失败404

vue.js Vue.js

斯丁

2020-03-23

因此,我已经开始尝试nuxt了,当时我需要axios,但无法使用nuxt的axios模块

这是文件

nuxt.config.js

module.exports = {
  generate: {
    routes: ['/']
  },
  head: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Flynd FMS' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  loading: { color: '#3B8070' },
  modules: [
    '@nuxtjs/router',
    '@nuxtjs/dotenv'
  ],
  plugins: [
    {src: '@/plugins/axios.js', ssr: true},
    {src: '@/plugins/vuex-router-sync.js', ssr: false}
  ],
  build: {
    vendor: ['axios'],
    extend (config, ctx) {
      if (ctx.dev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

插件/axios.js

import axios from 'axios'

const instance = axios.create({
  baseURL: process.env.API_HOST + ':' + process.env.API_PORT,
  transformRequest: function (request) {
    return request
  }
})

export default instance

pages / Login.vue

<template>
</template>
<script>
</script>

在这种状态下,axios实例甚至应该没有被调用过,但是奇怪的是它会产生一个错误页面 Request failed with status code 404

错误页面

我怀疑它试图打axios的baseUrl,并通过检查nginx访问日志来确认它。

这是预期的行为吗?如果没有,谁能指出我该如何避免呢?

谢谢!

更新资料

好的,通过将ssr更改为false,可以在发布此消息后的几分钟内正常工作

nuxt.config.js

module.exports = {
    plugins: [
        {src: '@/plugins/axios.js', ssr: false}
    ]
}

但是我将保持这个问题开放,因为在ssr模式下的行为仍然出乎意料。

第3138篇《Nuxt + Axios作为插件请求失败404》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
YOC140537603 2021.11.03

nuxt在构建的时候调用了axios请求,可能是进入的第一个页面的时候发送了一个接口无效的请求

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android