nuxt asyncData请求数据失败的问题 如何解决

最新推荐文章于 2024-05-11 10:28:57 发布
最新推荐文章于 2024-05-11 10:28:57 发布
阅读量2.8k 收藏 6
点赞数 7
分类专栏： nuxt vue axios 文章标签： vue ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/inksnowHL/article/details/120868026
版权
vue 同时被 3 个专栏收录
9 篇文章 0 订阅
订阅专栏
nuxt
3 篇文章 0 订阅
订阅专栏
axios
3 篇文章 0 订阅
订阅专栏

失败原因

折磨，折磨，asyncData请求数据，流程很离谱
首先，asyncData只在页面级别的组件中才会执行
其次，也是重点

在这里插入图片描述
如果你看见这个了，那么，你就遇到问题了
我通过process.client以及process.server发现
第一次进入页面，asyncData里的请求，是在客户端请求。
第二次进入页面，asyncData里的请求，是算服务端的。
而服务端的请求，不会走代理，于是会自动在本地的127.0.0.1:80去请求数据

![](https://img-blog.csdnimg.cn/24e9f5ef473b4d7ebdd0e8bccef8c8f8.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5aKo6Zuq6YGX55eV,size_15,color_FFFFFF,t_70,g_se,x_16

遇到的问题

然后，因为这两个奇怪的流程，就出现了：
第一次不能进去，但是之后的刷新，总报错的问题，还报跨域，我都不明白为啥服务端请求对服务端请求，会有跨域问题。
第一次能进去，但是之后的刷新，总是报错的问题，因为之后是服务端请求。

解决办法

因为asyncData里需要拼接全域名，不能抛开域名，且不会走代理
最终通过这个，动态的去使用基础地址：
$axios.defaults.baseURL = process.client ? '/api' : process.env.baseUrl
在客户端，依然是api开头然后走代理
在服务端，就拼接上全域名

关于nuxt配置环境变量使用process

我也写了Vue和Nuxt的配置方法，点击这里查看

墨雪遗痕
关注
  • 7
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Nuxt页面自定义meta标签和asyncData异步请求
01-03
一、页面自定义meta标签 可以为每个页面单独设置不同的meta标签 以便于SEO 全局的meta标签在nuxt.config.js文件里配置 而单独的meta标签在组件的内部标签内进行配置即可 值得注意的是：hid属性是页面的唯一标识 若想要在此配置并覆盖全局的meta 那么hid属性必须为description 因为默认的meta的hid属性就是description 若hid不配置成description 则会有两个meta标签 其中 一个的hid是description(默认的) 另一个的hid是自己配置的 从而产生重复 导致一些问题 因此hid要配置成description 以覆盖默
nuxtjs asyncData使用经验—如何发起多个axios请求并携带参数
猿经验(yuanjingyan.com)
10-18 916
nuxtjs asyncData使用经验—如何发起多个axios请求并携带参数
nuxt解决首屏加载慢问题_nuxt.js框架踩坑指南
weixin_39868959的博客
11-21 3528
Nuxt官方文档简单来说，Nuxt就是基于Vue的一个应用框架，采用服务端渲染，让你的SPA应用(Vue)也可以拥有SEO生命周期众所周知，Vue的生命周期全都跑在客户端(浏览器)，而Nuxt的生命周期有些在服务端(Node)，客户端，甚至两边都在:生命周期流程图，红框内的是Nuxt的生命周期(运行在服务端)，黄框内同时运行在服务端&&客户端上，绿框内则运行在客户端遇到的问题一、从...
Nuxt.js学习笔记（二）axios发送请求
v3424的博客
12-15 1973
nuxt学习二Nuxt路由与视图6. ajax操作6.1 整合axios6.1.1 默认整合6.1.2 手动整合（可选）6.1.3 常见配置6.2 使用axios发送ajax6.3 使用asyncData发送 ajax6.3.1 发送一次请求6.3.2 发送多次请求6.4 使用fetch发送 ajax6.5 插件：自定义axios6.5.1 客户端6.5.2 服务端6.5.3 插件配置总结 Nuxt路由与视图 https://blog.csdn.net/v3424/article/details/12193
nuxt asyncData接口错误日志收集
qq_40225369的博客
10-13 841
nuxt 错误日志收集
NUXT踩坑开发总结
weixin_43841400的博客
07-14 7110
NUXT踩坑开发总结nuxt介绍nuxt生命周期登录状态的处理及通用方案项目打包优化 通过一个多月的时间我将公司的一个项目用nuxt改造，在这当中踩过一些坑，我也在这进行一下总结，帮助大家快速认识一下nuxt nuxt介绍 nuxt简单来说就是基于vue的服务器渲染框架，它相比较于单页面应用,它做SEO更加好的，项目需要考虑SEO我更建议它。之前的项目是采用打包多页面形式来处理SEO,但这种形式体验还是差了很多，比如说页面跳转时候闪烁感非常强烈，还有当接口请求时间过长时中间未采用骨架屏，页面显示就不友好。
【前端工程化】nuxt项目，asyncData方法不触发的原因排查
qq_17335549的博客
09-29 2554
nuxt项目，asyncData方法不触发的原因排查
解决nuxt3中scroll组件渲染报错：document is not defined
jiaohuizhuang6019的博客
12-14 731
解决nuxt3中scroll组件渲染报错：document is not defined
nuxt在客户端动态引入cookie并使用、服务端动态引入cookieparser【cookie服务端和客户端共享数据】
weixin_43837268的博客
08-12 3143
<script> import { login } from "@/api/user"; // js-cookie是一个客户端模块，服务端不需要，所以需要动态加载 // process.client是Nux中特殊提供的一个API，用域判断代码的执行环境 const Cookie = process.client ? require("js-cookie") : undefined; export default { name: "loginPage", components: {},.
asyncData 本页面刷新报错问题
拿回忆下酒
02-25 1799
在项目中需要在初始化页面前先得到数据，也就是我们常说的异步请求数据。Nuxt.js贴心的为我们扩展了Vue.js的方法，增加了asyncData(){……}。从名字上就很好理解，这是一个异步的方法。 示例： asyncData ({ params }) {//请求 return axios({ method: 'get', url: '后台api接口' }) .then(function (res) { return { data:res.data } }) }
Nuxt.js 数据双向绑定的实现
10-17
主要介绍了Nuxt.js 数据双向绑定的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决Nuxt使用axios跨域问题
01-19
本文将介绍如何通过设置代理解决 Nuxt 与 axios 集成的跨域问题。 解决跨域 Nuxt 使用 axios 为避免出现前端页面跨域问题，需要安装 @nuxtjs/axios 和 @nuxtjs/proxy 两个模块。 用 yarn 安装： yarn add axios @...
nuxt3服务端获取数据demo.rar
11-26
nuxt3服务端获取数据demo.rar. nuxt3. Ts ssr 在服务端获取数据，随html一起返回浏览器的demo。封装好的 get 跟post请求 可以方便移植到项目中，或者直接在这修改！欢迎下载。免c币下载地址：...
Nuxt.js asyncData 多请求
weixin_45972345的博客
03-15 386
Nuxt.js asyncData 发送请求Nuxt.js asyncData 发送请求单次多次 Nuxt.js asyncData 发送请求 单次 <template> <div> <h1>asyncData</h1> {{name}} {{info}} {{info.name}} </div> </template> <script> import axios from 'axi
Nuxt.js核心知识详解
接着奏乐接着舞的博客
01-18 1087
1.Nuxt.js 服务器端的完整渲染（SSR）流程 2.在 Nuxt.js 中使用 `asyncData` 和 `fetch` 方法进行数据获取与在普通 Vue 应用中直接使用 Axios 进行数据请求的区别 3.如果我不使用asyncData发起请求，而是使用正常的axios发请求就没有服务端的渲染效果了，也就和普通的vue项目一样了 4.示例：使用 `asyncData` 方法，将涉及从前端发起请求到服务器端获取数据，最后在页面上渲染数据的完整步骤…
Nuxt.js学习(八) --- 异步数据
庭前云落的博客
01-03 632
[TOC] 1、异步数据 1.1、官方文档： Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法，使得我们可以在设置组件的数据之前能异步获...
NuxtServerError:Request failed with status code 500 我的解决办法与思路
热门推荐
前端一线搬运工的博客
01-26 17万+
目录 一.问题来源 二.解决思路 三.解决办法 四.总结 一.问题来源 平时使用nuxt和部署上线都是正常运行的,偶尔有一天报500的错误; Nuxt.js运行(npm run dev)报错如下: 服务器错误日志如下: 0|qiu | ERROR Request failed with status code 500 ...
nuxt3中的useAsyncData使用详解
CXW1014的专栏
02-08 4312
/ 定义一: function useAsyncData(handler :(nuxtApp?: AsyncDataOptions < DataT >) : AsyncData < DataT > // 定义二: function useAsyncData(key : string , handler :(nuxtApp?: AsyncDataOptions < DataT >) : Promise < AsyncData < DataT >> // 两个主要区别就是一个没有key,一个有key。
PHP的XML格式和AJAX
最新发布
m0_73736495的博客
05-11 494
PHP的XML格式和AJAX
同时多个axios请求_nuxt asyncData并发请求JWT token 错乱问题
05-24
在Nuxt中，可以使用`asyncData`方法来进行异步数据的获取。假设你需要同时进行多个axios请求，并且这些请求都需要使用JWT token，可以采取以下步骤： 1. 在Nuxt的`nuxt.config.js`文件中配置axios，包括设置baseURL、设置请求拦截器等。 ``` export default { axios: { baseURL: 'https://api.example.com', // ... // 设置请求拦截器 interceptors: { request: ({store}, config) => { const token = store.state.auth.token; if (token) { config.headers.common.Authorization = `Bearer ${token}`; } return config; } } } } ``` 2. 在`asyncData`方法中同时发起多个axios请求，可以使用Promise.all方法来等待所有请求返回结果。 ``` async asyncData({ $axios, store }) { const [user, todos] = await Promise.all([ $axios.$get('/user'), $axios.$get('/todos') ]); // ... } ``` 3. 在发起请求之前，先确保JWT token已经被获取并存储到了Vuex store中。可以在Nuxt的`middleware`中获取token并存储到store中。 ``` export default function ({ store }) { // ... // 获取token并存储到store中 const token = Cookies.get('token'); if (token) { store.commit('auth/setToken', token); } } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值