正常操作，正常分析，大家好，我是D1n910。

以下内容属于懂的都懂，不懂的（基于其他而关注我的同学）可能完全不知道的内容。

开始

公司新项目上，前端使用Nuxt实现服务器端渲染方案，请求接口的方案使用的是axios。

本地开发的时候，使用asyncData的进行同步获取接口渲染数据，效果表现是

（1）使用NuxtLink跳转到对应的动态数据渲染页面，能够正确执行asyncData方法，渲染数据；

（2）动态数据渲染页面刷新，或者从地址栏输入地址进入，能够正确执行asyncData方法，渲染数据；

部署到服务器后，观察表现如下

（1）使用NuxtLink跳转到对应的动态数据渲染页面，能够正确执行asyncData方法，渲染数据；

（2）动态数据渲染页面刷新，或者从地址栏输入地址进入，不正确执行asyncData方法，不渲染数据，在asyncData上插入了console.log()都是不执行的。

通过查询相关内容，我明白了以下几点内容：

（1）服务器端渲染时，如果没有设定axios基础地址的绝对路径，axios的完整地址的基础地址默认为127.0.0.1:80

我的情况

1.1 本地开发时，为了进行ajax请求，axios的基础地址是绝对地址；

因为我是写完整地址，所以能够在当前有asyncData页面的情况下，刷新等能够加载数据

1.2 单页面开发习惯，线上开发时，通过判断环境变量是不是dev环境，从而使得axios切换成动态的api地址——即用浏览器当前开发域名进行拼接

线上时因为不是完整地址，第一次服务器端渲染，asyncData上的axios方法请求的是找127.0.0.1:80，如果127.0.0.1:80并不是实际api所在地址，会使得asyncData运行错误，这在视觉上的表现就是数据不能渲染。

而我的asyncData上的axios请求是写成同步的，同步代码报错，会导致之前的打印方法也不会执行。

（2）浏览器端渲染运行axios后，axios本身保存了基础路径为浏览器端当前路径，服务器端再运行asyncData中的axios方法时即为浏览器端当前路径为完整域名

这解释了我先打开没有asyncData的静态页面，再通过该页面内的nuxtLink进入有asyncData的动态页面，能够正常刷新出数据。

解决办法

知道问题所在后，解决思路很简单——让axios在服务器端时，请求正确的api所在的地址

我的方法是：通过【构建代码】时【设置“基础地址” 环境变量】，从而让axios访问的是正确的服务器端地址

这样如果你有线上服务器、测试服务器、开发服务器这样的现代互联网应用开发基础部署需求，就可以配置一次，多地使用辽～

核心步骤

1、修改package.json

不同环境下，npm run {对应的build}即可！

2、nuxt.config.js 的env增加BASE_URL（这个是你自定义的名称！和你在build里设定的环境变量名保持一致即可～）

3、将 axios 的baseURL修改为环境变量对应的值

然后就可以发现问题解决辣。

思考&其他问题

1、解决仓促，这样的情况下，虽然解决了服务器端请求的问题，但实际上还是需要进行前端同学进行环境等的配置，有没有办法可以抽离出来，让运维同学进行操作的？

时下思路是修改本身发布的办法

2、浏览器端进行ajax请求时，因为是写死的baseURL，可能会产生跨域问题

这种情况下会产生我思考的跨域问题。https://bbbbb.com进行ajax请求，环境变量写死的是https://www.bbbbb.com，那么在后端没设定的情况下进行请求，会产生跨域问题。

解决方案：运维同学出手，所有的域名重定向至同一域名（环境变量的域名），请求和浏览器端保持一致，完美解决，感谢运维同学。

感谢

能够解决问题，首先要感谢网络上前辈们的无私分享，这两个对我有真实帮助的：

1、Vue的Nuxt框架在SSR下环境变量处理接口Host以及80端口问题

感谢对象： 风蓝小栖

地址：https://baijiahao.baidu.com/s?id=1627057191674675897&wfr=spider&for=pc

2、[前端] Nuxt 服务器渲染，有大佬遇过浏览器当前页面刷新，不执行 asyncData 方法的吗？（非 query 的问题）

感谢对象： ZY2071

地址：https://www.v2ex.com/t/581473#reply4

END