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

Posted 2023-02-22

【中文标题】Nuxt + Axios 作为插件请求失败 404

【英文标题】：Nuxt + Axios as plugin Request Failed 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', s-s-r: true,
    src: '@/plugins/vuex-router-sync.js', s-s-r: 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 访问日志确认了它。

这是预期的行为吗？如果没有，谁能告诉我如何避免这种情况？

谢谢！

更新

好的，我通过将 s-s-r 更改为 false 发布后几分钟就可以正常工作了

nuxt.config.js

module.exports = 
    plugins: [
        src: '@/plugins/axios.js', s-s-r: false
    ]

但我会保留这个问题，因为 s-s-r 模式下的行为仍然出乎意料。

【问题讨论】：

你可以试试我的package。

【参考方案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)