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

Question

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

这是我的nuxt.config(简化(

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

最后，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
• 公理模块：https://axios.nuxtjs.org/options#proxy