使用 axios 和 nuxt 进行服务器和客户端 API 调用的不同 baseURL

Posted 2023-02-22

【中文标题】使用 axios 和 nuxt 进行服务器和客户端 API 调用的不同 baseURL

【英文标题】：Different baseURL for server and client API calls with axios & nuxt

【发布时间】：2019-12-21 17:09:40

【问题描述】：

假设我正在开发一个包含多个微服务的平台，Nuxt 前端服务就是其中之一。 我在 nuxt 中间件（在服务器和客户端都运行）中使用 Axios。 在 nuxt 服务内部，API baseURL 是本地机器的内部调用，但从客户端来看，baseURL 是公共应用程序域。

我可以使用服务器的请求对象，或者配置文件，或者区分运行环境来解决它。 我提到的每个选项都可以工作，但现在我正在为不同的客户端和服务器环境变量寻找最佳实践。

中间件文件：

import axios from 'axios'

export default function ( route ) 
  return axios.get('api/some-data');

来自服务器的请求应该调用“http://internal-service:SOME_PORT/api/some-data.

来自客户端的请求应调用“http://my-domain.com/api/some-data.

【参考方案1】：

我在写问题的过程中找到了答案..

在 nuxt.config.js 文件中：

  axios: 
    baseURL: 'http://internal-service:5000',
    browserBaseURL: 'http://my-domain.com' //can use environment variables to fill both..
  ,

【讨论】：

“诀窍”是“baseURL”是默认值，这对我来说有点奇怪，因为我认为客户端 URL 应该是实际的默认值。