Docker环境下Axios GET请求超时，但CURL调用同接口正常

核心问题在于浏览器端Axios请求与容器内curl请求的发起环境完全不同：

• curl是在Vue容器内部发起的，直接走Docker内部网络，能正常解析Flask容器的服务名/IP；
• 但Axios是在用户本地浏览器中执行的，浏览器无法直接访问Docker内部网络，若你在Vue代码中写的是Flask容器的内部地址（比如http://flask-backend:5000/api），浏览器会把这个地址当成本地网络地址去解析，必然超时。

方案1：配置Vite代理（推荐） #

通过Vite开发服务器做请求转发，让浏览器只需要访问前端服务，由Vite把API请求转发到Docker内部的Flask服务。修改vite.config.js如下：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server:{
    port: 80,
    host: "0.0.0.0",
    // 添加代理配置
    proxy: {
      '/api': {
        target: 'http://flask-backend:5000', // 替换为你的Flask容器服务名+端口（Docker网络内可访问）
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '') // 若Flask API无/api前缀，可删除该行
      }
    }
  }
})

之后Vue代码中的Axios请求改用相对路径：

axios.get('/api/your-endpoint')

方案2：将Flask服务暴露到宿主机 #

如果不想用代理，可将Flask容器的端口映射到宿主机（比如Docker启动时加-p 5000:5000），然后Vue代码中直接使用宿主机IP+端口访问：

axios.get('http://宿主机IP:5000/api/your-endpoint')

此方式不够优雅，且生产环境不建议直接暴露后端端口。

验证要点 #

• 确认Flask容器的服务名/IP在Docker网络内可被Vue容器curl访问（你已验证过，说明网络连通性无问题）
• 检查Vue代码中的API地址：绝对不能使用Docker内部的服务名，必须用代理后的相对路径或宿主机可访问的地址
• 若为生产环境构建的Vue镜像，需在Nginx配置中添加反向代理，原理与Vite代理一致

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