Nuxt Axios 在页面之间移动时返回错误答案

【问题标题】：Nuxt Axios Returns Error when moving between pagesNuxt Axios 在页面之间移动时返回错误
【发布时间】：2020-12-28 12:02:40
【问题描述】：

我正在构建一个使用 axios 的 nuxt 应用程序。

在我的 index.vue 中，我有以下代码。

<template>
  <div>
    <Hero />
    <Homebooks :details="details" />
  </div>
</template>

<script>
export default {

  // USING ASYNC AWAIT
  // async asyncData ({
  //   $axios,
  //   error
  // }) {
  //   try {
  //     const details = await $axios.$get('http://127.0.0.1:8001/api/books')
  //     return {
  //       details
  //     }
  //   } catch (e) {
  //     error({
  //       statusCode: 503,
  //       mesage: 'Unable to fetch'
  //     })
  //   }
  // }
  // USING ...
  asyncData ({ $axios, error }) {
    return $axios.$get('http://127.0.0.1:8001/api/books').then((response) => {
      return {
        details: response
      }
    }).catch((e) => {
      error({
        statusCode: 503,
        message: 'Unable to fetch data'
      })
    })
  }
}
</script>

当我从页面移到另一个页面时。然后我会使用返回按钮或点击菜单链接返回它

          <nuxt-link to="/" prefetch class="nav-link active">
            Home
          </nuxt-link>

返回错误

无法获取事件呈现页面时发生错误。详情请查看开发者工具控制台。

但是当我刷新页面时，整个数据会从 API 的响应中再次填充而不会出现错误。

我不知道我在这里做错了什么。

【问题讨论】：

您的控制台中是否显示Unable to fetch data.. 或Unable to fetch event...。我认为它应该与您在 catch 块中定义的字符串相同？！无论如何，第一次之后似乎无法获取您的数据。您的控制台说什么，如错误消息中所示？这会很有帮助，因为它会告诉您更多关于在获取数据时出了什么问题...
在控制台中，它返回了一个 cors 错误。在我托管 api 之后，一切似乎都运行良好。有没有办法可以在本地防止 cors 错误？
到目前为止，我遇到了很多 CORS 错误，哈哈。我认为这里存在 CORS 问题，因为您的本地 API 可能使用 http 运行，而您的托管 API 似乎运行安全协议 https。我认为这可能是mixed content 问题。（例如stackoverflow.com/questions/51978207/…）。只是谷歌混合内容和 CORS，你应该找到一些关于它的东西，我猜......

标签： javascript api vue.js axios nuxt.js

【解决方案1】：

在config/cors.php使用

'paths' => ['api/*']

【讨论】：

我怀疑这是否有帮助，甚至根本有效。请通过解释您的代码来说服我。