Nuxt+Express电商应用部署到Digital Ocean的base URL配置问题

问题根源 #

你配置的https://0.0.0.0:8080/是错误地址：0.0.0.0是服务端用来绑定监听所有网卡的地址，仅服务端内部有效，不能作为客户端发起API请求的目标地址。

正确配置方法 #

1. 直接替换为服务器公网地址

先获取你的Digital Ocean Droplet的公网IP（或者你绑定的站点域名），直接修改baseDomain：

• 未配置SSL证书时使用HTTP协议：

const baseDomain = 'http://<你的Droplet公网IP>:8080/'
// 如果你绑定了域名则改成：const baseDomain = 'http://<你的域名>:8080/'

• 已配置SSL证书时使用HTTPS协议（如果用默认443端口可省略端口号）：

const baseDomain = 'https://<你的域名>/'

2. 环境变量自动适配（推荐）

避免本地开发和生产部署手动切换地址，通过环境变量自动判断运行环境修改配置：
首先在nuxt.config.js中补充axios配置：

// nuxt.config.js
export default {
  // 其余原有配置保留
  modules: ['@nuxtjs/axios'],
  axios: {
    baseURL: process.env.NODE_ENV === 'production' 
      ? 'https://<你的生产环境地址>/'  // 替换为你的生产地址
      : 'http://localhost:8080/'
  }
}

之后请求时直接使用this.$axios发起请求即可，不需要手动拼接baseURL。

必查配置项 #

• 确认Digital Ocean Droplet的防火墙已开放8080端口的入站规则，否则外部请求会被拦截
• 若未配置SSL证书不要使用HTTPS协议，否则会报连接错误
• 生产环境建议修改Express的CORS配置为指定允许的前端域名，避免跨域安全问题：

// 服务端index.js中替换原有app.use(cors())
app.use(cors({
  origin: '<你的前端访问地址>'
}))

内容的提问来源于stack exchange，提问作者Sb Zakaria