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

期望值：要使服务触发对代理端点的呼叫，在两种情况下：通过链接访问页面或刷新页面

发生了什么：当我在页面上单击刷新时，而不是触发对[[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