Nuxt：代理 VS 异步数据 VS 重新加载页面

Question

我正在构建一个 nuxt 应用程序，但我遇到了代理和异步数据的问题。

这是我的nuxt.config（简体）

modules: [
'@nuxtjs/axios',
'@nuxtjs/proxy'
],
axios: {
  proxy: true
},
proxy: {
  '/api': {
    target: 'http://www.example.com',
    pathRewrite: {
      '^/api': '/'
    }
  }
}

这是我的 asyncData 代码片段（已简化）：

async asyncData ({ store }) {
  await store.dispatch('fetchData')
}

存储操作fetchData代码（简化）：

async fetchData({ commit }) {
    const response = await myService.fetchData()
    commit('setData', response.data)
}

最后，myService 函数（简化）：

fetchData () {
    return axios.get('/api/path-to-my-resource')
}

期望值： 要让服务触发对代理端点的调用，在两种情况下：通过 link 访问页面或刷新页面

发生了什么： 当我在页面上点击刷新时，我看到它没有触发对 http://www.example.com/path-to-my-resource 的调用，而是尝试在 /api/path/to-my-resource 执行此操作 当然失败了。据我了解，当我刷新页面时，代理在 asyncData 挂钩内不工作。

我很确定有些东西我尝试错了，但我找不到它。有人可以指出我正确的方向吗？

Answer 1

试试这样的东西：

proxy: {
  '/api/': { target: 'http://www.example.com', pathRewrite: {'^/api/': ''} }
// ^^^^^                                                      ^^^^^^   ^^
// Note the ending slashes.
// And the rewrite rule.
}

文档是这样写的：

http (ky) 模块：https://http.nuxtjs.org/api/#proxy
Axios 模块：https://axios.nuxtjs.org/options#proxy

Nuxt：代理 VS 异步数据 VS 重新加载页面

Nuxt: Proxy VS Async data VS Reload page

proxy

nuxt.js

asyncdata