失败原因

折磨,折磨,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的配置方法,点击这里查看

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐