dockerized 环境中的 Nuxt SSR 水合

Question

我有一个带有 SSR 的 Nuxt.js 应用程序。它使用我在 Django 中构建的 API。

在我的开发环境中，一切正常。但在 dockerized 设置中，我遇到了以下问题：

Axios 设置使用

baseURL

参数在前面添加

http://backend:8000/api

，其中

backend

是

docker-compose

文件中的服务名称。

当我直接访问 URL 时，效果很好，并且页面在服务器端呈现。但是，当我点击任何链接时，页面 is page 现在在客户端呈现，Axios 会从

http://backend:8000

请求数据，这显然是不正确的，因为它应该使用我网站的域名。

关于我应该如何解决这个问题有什么想法吗？

Answer 1

您可以像这样根据环境（客户端或服务器）动态配置 axios。

此外，您的 Django API 需要外部域名。

config.nuxt.js

export default {
  // ...

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    baseURL: process.browser ? 'https://api.external-domain.com/api' : 'http://backend-container:8000'
  },

  // ...
}

Answer 2

这就是在带有 Axios 模块的 NuxtJs v2.15 中对我有用的东西：

在

nuxt.config.js

文件中：

axios: {
  baseURL: 'http://backend:8000/api',
  browserBaseURL: 'http://localhost/api'
  //....
}