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

【问题标题】：Nuxt + Axios as plugin Request Failed 404Nuxt + Axios 作为插件请求失败 404
【发布时间】：2018-03-31 11:43:17
【问题描述】：

所以我开始尝试 nuxt，我正处于需要 axios 但我不能使用 nuxt's axios module 的地步。

这是文件

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

plugins/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 模式下的行为仍然出乎意料。

【问题讨论】：

你可以试试我的package。

标签： vue.js axios nuxt.js

【解决方案1】：

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

See Img here

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

这是一个适用于所有 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)

【讨论】：