@Nuxtjs/proxy 页面刷新时不重写模块路径

Question

我正在开发一个 nuxt 应用程序，它使用 axios 在后端使用 asyncData 从 API 获取数据。我还添加了 @nuxtjs/proxy 模块作为依赖项，代理我所有的 API 调用。

每当我在客户端使用 link 导航到页面时，代理会按预期工作并在将请求发送到后端 [=44] 之前从路径中删除 /api/ 前缀=].

Example:

Client requests: /api/data

Proxy strips /api/ from request

Resulting path to api: http://example.com/data

但是，我运行遇到的问题是页面刷新。代理模块无法从路径中删除 /api/，导致路径在 api

上不存在

Example:

Desired path: http://example.com/data

Path on refresh: http://example.com/api/data

这是我的简化版 nuxt.config.js:

export default {
  components: true,
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy',
  ],
  axios: {
    proxy: true,
  },
  proxy: {
    '/api/': { target: process.env.API_URL, pathRewrite: { '^/api/': '' } },
  }
}

这是我的 .Vue 页面的简化版本：

<template>
  <div>This is a vue Page</div>
</template>

<script>
export default {
  name: 'VuePage',
  async asyncData({ error, query, $axios }) {
    try {
      const { data } = await $axios.get('/api/data', { params: query });
      return {
        data,
      };
    } catch (err) {
      error({
        statusCode: err.response.status,
        message: err.response.data.message,
      });
    }
  },
};
</script>

我已经在 Whosebug 上查看了其他一些问题，但没有很好的答案。

问的类似问题是，

问题被标记为已回答，但没有说明问题是如何解决的。

Answer 1

我找到了似乎可以解决问题的插件形式的解决方法。

该插件基于用户 wiked03 的 reddit post，旨在从请求

中删除 /api/

创建插件

在您的项目根目录中创建一个名为 plugins 的文件夹并创建一个名为 axios.js

的文件

将此代码添加到 ./plugins/axios.js

// ./plugins/axios.js

export default function ({ $axios }) {
  $axios.onRequest((config) => {
    if (process.server) {
      config.url = config.url.replace('/api/', process.env.API_URL)
    }
  })
}

配置 NUXT 以使用 Axios 插件

找到您的 nuxt 配置文件 nuxt.config.js 并按如下方式编辑它：

// ./nuxt.config.js

export default {
  // ~~~~ Some Configs ~~~~ //
  plugins: ['~/plugins/axios.js'],
}

来源：

Reddit Post - wiked03

@Nuxtjs/proxy 页面刷新时不重写模块路径

@Nuxtjs/proxy module path not rewriting on page refresh

javascript

node.js

vue.js

axios

nuxt.js

创建插件

配置 NUXT 以使用 Axios 插件