Docker容器内前端服务无法与同网络后端服务通信问题

安全阿岳

2026-7-10

问题原因

浏览器运行在本地主机环境，而非前端容器内部。Docker内部网络的backend域名仅能被容器网络内的服务解析，主机的DNS无法识别该域名，因此浏览器发起请求时出现ERR_NAME_NOT_RESOLVED错误。而前端容器内的curl能正常调用，是因为容器处于Docker网络中，DNS可以解析backend。

解决方案

方案1：直接使用主机映射的后端端口

后端容器已通过-p 5000:5000将端口映射到本地主机，将前端代码中的API地址从http://backend:5000修改为http://localhost:5000，浏览器即可通过主机端口访问后端服务。

方案2：配置Vite代理（推荐用于开发环境）

利用Vite的代理功能，将前端的API请求转发到后端容器，同时避免跨域问题：

修改前端项目的vite.config.js，添加代理配置：

export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://backend:5000',
        changeOrigin: true,
      },
    },
  },
};

调整前端代码中的API请求路径，例如将http://backend:5000/api/get-random-video-key改为/api/get-random-video-key。
重启前端容器，此时Vite会将所有以/api开头的请求转发到后端容器，浏览器访问的是前端的3000端口，请求同源无跨域问题。