Nuxt.js router.push 在使用 asyncData 查询时没有完全重定向到另一个页面

Posted 2023-03-04

【中文标题】Nuxt.js router.push 在使用 asyncData 查询时没有完全重定向到另一个页面

【英文标题】：Nuxt.js router.push doesn't fully redirect to another page while using asyncData query

【发布时间】：2020-08-16 20:23:37

【问题描述】：

我在我的一个页面中使用 asyncData 查询：

async asyncData($axios, query) 
  const id = query.id;

  try 
    const data = await $axios.$get(`http://localhost:8000/api/question/$id`);
    return 
      question: data

    
   catch (e) 
    console.log(e);
  
,

每当我尝试从此页面访问另一条路线时，例如：

@click="$router.push('/solution'); addTodo(question.keywords); addTodo(option.keywords)">

它将我重定向到此页面/解决方案，但访问 API 的请求仍然来自上一页（问题/id）

访问 localhost:3000/解决方案页面：

CORS 适用于所有其他页面，所以我认为问题出在重定向上。

有什么可能的解决方案来解决这个问题？

另外，这是我在“网络”选项卡中看到的：

我认为referer应该是：localhost:3000/solution

【问题讨论】：

这里是 Firefox 控制台错误的链接：imgur.com/e6UXP5z @sideshowbarker > 跨域请求被阻止：同源策略不允许读取位于 localhost:8000/api/getsolution 的远程资源。 （原因：CORS 标头“Access-Control-Allow-Origin”缺失）。正如我所看到的，这是 CORS 错误，但据我所知，CORS 一切正常，我已经检查了几次后端。此外，一切都在其他页面上完美运行

前端路径为localhost:3000/solution，后端调用localhost:8000/api/getsolution。我在 asyncData 方法中调用 localhost:8000/api/getsolution（在解决方案路径中）

我的后端是 Laravel，我使用的是 github.com/fruitcake/laravel-cors，一切都已启用 [*]。通过说更新问题以显示 CORS 配置 - 你能澄清一下你的意思吗？

哦，当然。 config/cors.php -> 'allowed_headers' => ['*'],

我不知道，但也许可以尝试将其设置为 'paths' => ['api/*'] 我猜

【参考方案1】：

将'paths' => ['api/*'] 添加到 Laravel 后端 CORS 配置有帮助。