Docker环境下Vite代理无法连接localhost:5000后端问题求助

我正在学习Vue，用Docker搭建了Vue项目和json-server后端，两者都能正常运行。但用fetchTasks函数通过'/api/tasks'请求后端数据时，浏览器控制台报GET http://localhost:8080/api/tasks 500错误，容器日志显示[vite] http proxy error: Error: connect ECONNREFUSED 127.0.0.1:5000。直接请求'http://localhost:5000/tasks'或者手动访问localhost:5000/tasks都正常，把Vite代理目标换成jsonplaceholder.typicode.com也能正常请求，试过查Vite文档、改ws配置、调整正则、换端口等方法都没解决。

相关代码 #

fetchTasks函数（报错版本） #

async fetchTasks(){
    const res = await fetch('api/tasks')
    const data = await res.json()
    return data
}

created钩子调用 #

async created(){
    this.tasks = await this.fetchTasks()
}

Vite配置 #

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: {
      proxy: {
        '/api': {
          target: 'http://127.0.0.1:5000',
          changeOrigin: true,
          secure: false,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    }
})

db.json #

{
    "tasks": [
        {
            "id": "1",
            "text": "Doctors appointment",
            "day": "March 1st at 2:30 pm",
            "reminder": true
        },
        {
            "id": 2,
            "text": "Meeting at school",
            "day": "March 3rd at 1:30 pm",
            "reminder": true
        },
        {
            "id": 3,
            "text": "Food Shopping",
            "day": "March 3rd at 11:00 am pm",
            "reminder": false
        }
    ]
}

docker-compose.yml #

services:
    task-tracker:
      image: "node:16"
      container_name: "task-tracker"
      user: "node"
      working_dir: "/usr/src/app"
      environment:
        - NODE_ENV=development
      volumes:
        - ./:/usr/src/app
      ports:
        - "8080:8080"
      command: "npm run dev -- --port 8080"
    task-tracker-db:
      image: "clue/json-server"
      container_name: "task-tracker-db"
      working_dir: "/data"
      environment:
        - NODE_ENV=development
      volumes:
        - ./db:/data
      ports:
        - "5000:80"

错误原因 #

问题出在Docker容器的网络隔离上：

• Vue项目运行在task-tracker容器里，容器内的127.0.0.1指向容器自身，而非宿主机的127.0.0.1。
• 你配置的Vite代理目标是http://127.0.0.1:5000，容器里的Vite会尝试访问自己的5000端口，但这个端口并没有运行json-server，所以报ECONNREFUSED。

修复方案 #

方案1：使用Docker Compose服务名作为目标地址（推荐） #

Docker Compose会自动为同一网络下的服务创建DNS解析，直接用后端服务名task-tracker-db作为代理目标，同时注意后端容器内部暴露的是80端口：
修改Vite配置中的target字段：

server: {
  proxy: {
    '/api': {
      target: 'http://task-tracker-db:80', // 替换为服务名+容器内端口
      changeOrigin: true,
      secure: false,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
}

方案2：使用宿主机IP地址（不推荐，环境变动易失效） #

如果你的宿主机有固定局域网IP（比如192.168.x.x），也可以直接填写该IP作为代理目标：

target: 'http://192.168.1.100:5000' // 替换为你的宿主机IP

验证修改 #

重启Docker Compose服务后，重新调用fetchTasks函数，代理请求就能正常转发到json-server后端了。

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