获取 vue devServer 代理以使用 docker 中的不同本地端口

Question

在这里尝试正确设置这个有点疯狂。我在 docker 中使用 devServer 运行 Vue，然后运行 ​​json-server 的单独卷，用于提供假 api 数据。首先，我很乐意让这个简单的示例工作，但我不断收到代理错误。这是我当前的配置。

码头工人组成：

version: "3.7"

services:
  front:
    container_name: front
    build: .
    volumes:
      - .:/app
      - ./node_modules:/app/node_modules
    ports:
      - '8080:8080'

  api:
    image: vimagick/json-server
    command: -H 0.0.0.0 -p 3000 -w db.json
    ports:
      - "3000:3000"
    volumes:
      - ./server/data:/data

Dockerfile：

FROM node:lts-alpine as front

# install simple http server for serving static content
RUN npm install -g @vue/cli

# make the 'app' folder the current working directory
WORKDIR /app

# Add necessary files to app
ENV PATH ./:/app/:./node_modules/.bin:$PATH
ENV NODE_ENV=development

# copy both 'package.json' and 'package-lock.json' (if available)
COPY package.json /app/package.json
COPY package-lock.json /app/package.lock.json

# install project dependencies
RUN npm install --silent

# copy project files and folders to the current working directory (i.e. 'app' folder)

COPY ./ .

EXPOSE 8080
CMD ["npm", "run", "serve"]

以上所有工作正常。上面的所有内容都已构建，并且它们都在各自的端口上运行。

我可以导航到http://localhost:3000/posts，然后看到我期待的假 json。我可以在http://localhost:8080/. 现在问题来了。我想在VUE应用从JSON服务器使用的数据，我想从我的代理请求http://localhost:8080/api/*到http://localhost:3000/$1。这是我的 Vue.Config 文件：

module.exports={
  devServer: {
      proxy: {
        "^/api/": {
          target: "http://localhost:3000/",
          secure: false,
          pathRewrite: {
            "/api/*": "/"
          }
        }
      }
    }
  };

然后在应用程序中，我发出类似的请求axios.get('/api/posts/')。我在所有三个文件中尝试了上面代码的大约 100 种不同的细微变化，但每次出现此错误时：

代理错误：无法将请求 /posts 从 localhost:8080 代理到http://localhost:3000/ ( ECONNREFUSED )。

我想我对它应该如何工作有一个根本的误解，因为我已经按照每条说明进行操作并从 Vue 的说明中复制和粘贴。任何人都可以提供的任何见解将不胜感激

Answer 1

这里代理的问题localhost不正确。如果您将 vue 配置更改为以下内容，它应该可以工作：

module.exports={
  devServer: {
      proxy: {
        "^/api/": {
          target: "http://api:3000",
          secure: false,
          pathRewrite: {
            "/api/*": "/"
          }
        }
      }
    }
  };

基本上，变化是将 host 从 替换localhost为api。原因是 docker-compose 通过服务名称解析主机。由于您的服务名称是api，因此主机也应该是api。

再澄清一点，这里的主机不是从你的机器的角度来看，而是从 vue.js 容器的角度来看。从 vue.js 容器的角度来看，api 是一个单独的主机（不再是本地主机）。希望这是有道理的 - 如果需要更多说明，lmk。