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

标签 javascript vue.js axios nuxt.js

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

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

中间件文件:

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

最佳答案

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

nuxt.config.js 文件中:

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

关于javascript - 使用 axios 和 nuxt 的服务器和客户端 API 调用的不同 baseURL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57506622/

相关文章:

javascript - Select2 4.0 JSON 搜索不起作用

javascript - Javascript 中带有 fetch 的相对路径

javascript - 当 [渲染 : "TypeError: Cannot read property ' length' of undefined"] is found in multiple files, 错误不只是一个时,背景可能是什么?

javascript - 子文件夹中的 Vue CLI 3 SPA,根目录中的静态 HTML 页面

json - 如何使用 VUE 显示来自 API 的 JSON 数据

javascript - react + Axios : Uncaught (in promise) TypeError: Cannot read property 'map' of undefined

node.js - utf-8 编码的字符串到缓冲区 node.js

JavaScript Canvas 创建正方形

javascript - Axios 被 Django REST 框架的 CORS 策略阻止

Javascript 测试对象是否有任何未定义或为 null 的键