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

Question

因此，我已经开始尝试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模式下的行为仍然出乎意料。

Answer 1

如果您在 nuxt.js 上使用最新版本，它将安装哪个模块。只需按空格键选择“Axios”即可开始。

请参阅此处的图片

然后您可以为所有调用创建一个全局函数。

这是所有 get 调用的全局函数。
不要忘记将此文件包含在中间件文件夹中。

getReq: async function (apiUrl, reqHeader) {
return await axios
  .get(apiUrl, reqHeader)
  .then((response) => {
    console.log('Response from', apiUrl, ':', response)
    return response
  })
  .catch((err) => {

    if(err.response.data.error === 'session data missing'){
      console.log("this:",this);
      console.log("Error:",err.response.data.error);
      // Popup Msg
      Snackbar.open({
        duration: 5000,
        message: 'Session Error! Please Sign Again',
        type: 'is-warning',
        position: 'is-top-right',
        actionText: 'Ok',
        indefinite: false,
        onAction: () => {
          console.log("pap",location);

          location.replace("/")
        }
      })

    }
    return err.response
  })
},

这就是全局函数的调用方式。

const contractList = {
      headers: {},
      params: {
        id: null,
        state: this.state
      },
      withCredentials: true
    }

    const response = await ApiService.getReq(LIST_CONTRACT, contractList)
    console.log('Response from getList', response)