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

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

1 个答案: