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

我正在构建一个nuxt应用程序，并且面临代理和异步数据的问题

这是我的numxt.config（简化）

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

存储操作获取数据代码（简化）：

最后，myService功能（简化）：

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

发生了什么： 当我点击页面上的refresh时，我看到它没有调用，而是试图在/api/path/上调用我的资源，当然失败了。据我所知，当我刷新页面时，代理在asyncData挂钩内不工作

我很确定我有错误的尝试，但我找不到。有人能给我指一下正确的方向吗？

试试以下方法：

代理：{
“/api/”：{target:'http://www.example.com，路径重写：{'^/api/'：''}
// ^^^^^                                                      ^^^^^^   ^^
//注意结尾的斜杠。
//还有重写规则。
}

文档就是这样写的：

• http（

  ky

  ）模块：
• Axios模块：

---

尽管这不是我问题的解决方案，但你给了我正确的想法。实际上，在调用我的服务中的端点时，URL中的斜杠是一个问题。但既然你给了我这个主意，就这样吧。这是我的一票。你解决问题了吗？在使用服务器端钩子（即asyncData、created等）时，我也面临同样的问题。服务器尝试连接到

127.0.0.1/..

而不是代理

target

，并获得

ECONREFUSSED 127.0.0.1:80

是。问题在于，使用代理可以编辑nuxt的axios实例。通过在商店或服务开始时使用“axios导入axios”，您实际上使用了另一个未配置代理的axios实例。因此，我所做的是，我删除了服务，将所有端点调用移到了我的存储中，并在任何地方使用了

this.$axios.xxxx

，因此我在任何地方都使用代理。

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

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

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

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