Nuxt/Axios：baseURL 具有相同的来源，但可能有不同的端口？答案

【问题标题】：Nuxt/Axios: baseURL with same origin, but different port possible?Nuxt/Axios：baseURL 具有相同的来源，但可能有不同的端口？
【发布时间】：2021-09-15 13:31:29
【问题描述】：

短：
如何为nuxt.config中的axios请求设置不同的端口，但具有相同的源域？

长：
在我的生产端，我有一个快速服务器，它通过同一个端口（例如http://192.168.2.22:8800）提供我的前端和后端。 Axios 将使用相同的端口在同一个源上发出 API 请求。效果很好。

在我的开发方面，我有一个只提供我的 API 的快速服务器，我还有一个 nuxt 服务器，为前端提供服务。两者都在不同的端口上运行（例如，http://192.168.2.22:8800 用于我的后端，http://192.168.2.22:3000 用于我的 nuxt）。为了在我的开发环境中也可以执行 API 调用，我将nuxt.config 中的baseURL 设置为http://localhost:8800。

我的问题是，如果我在本地主机上，我只能测试我的开发环境。如果我想通过另一台电脑访问，api调用也在localhost上启动，无法访问。

有没有办法向 baseURL 添加动态端口？
我现在的nuxt.config：

axios: {
  baseURL: isDev ? 'http://localhost:8800/api/v1' : '/api/v1'
},

为了获得更好的概览。
这就是我想要的产品（只有快递正在运行）：

Frontend: http://192.168.2.22:8800
Backend: http://192.168.2.22:8800

这就是我在开发方面想要的（两台服务器正在运行 - express 和 nuxt）：

Frontend: http://192.168.2.22:3000
Backend: http://192.168.2.22:8800

【问题讨论】：

不确定我是否完全理解这里的问题。如果您想从本地网络中的任何位置访问您的服务器，您可以在您的nuxt.config.js 文件中使用host: '0.0.0.0'，如下所示：nuxtjs.org/docs/2.x/configuration-glossary/configuration-server
这样，您可以使用localhost 或其私有本地IP 地址（又名192.168.1.XXX）访问您的服务器。否则，您的配置很棒（isDev）！
很抱歉给您带来了困惑。现在我可以访问我的开发环境，在我的电脑上通过网络在树莓派上运行。问题是，当我访问我的前端（例如192.168.1.XXX:3000）时，所有axios api 请求仍然发送到http://localhost:8800/api/v1。相反，api 请求应该发送到http://192.168.1.XXX:8800/api/v1（与前端不同的端口）。
为什么不使用本地 IP 或 RaspberryPi 的 IP 设置环境变量？
嗯...我想我会坚持使用 env 变量。在我想要开发的每台设备上将变量设置为一次性设置并使用“本地主机”作为后备更容易。在生产方面，一切都是动态的。太感谢了。 :)

标签： express axios nuxt.js

【解决方案1】：

环境变量确实仍然是您最好的选择。它将帮助您根据自己的喜好配置每个环境，并避免很多错误。

这里还有一篇关于这个主题的有趣文章：https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config

【讨论】：