让vue devServer代理与docker中的不同本地端口一起工作

Question

这里有点疯狂，想把它设置好。我在docker中使用devServer运行Vue，然后使用一个单独的卷运行json服务器，以提供虚假的api数据。首先，我很乐意让这个简单的示例正常工作，但我一直会遇到代理错误。这是我目前的配置。

docker-撰写：

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。配置文件：

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

然后在应用程序中，我提出像axios.get（'/api/post/'）这样的请求。我在所有三个文件中尝试了上面代码的大约100种不同的细微变化，但是每次我都会遇到这个错误：

代理错误：无法将本地主机8080的请求/帖子代理到http://localhost:3000/ （经济融合）。

我认为我对这应该如何工作有一个基本的误解，因为我遵循了每一条指令，并从Vue的指令中复制和粘贴。任何人能提供的任何见解都将不胜感激

Answer 1

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

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

基本上，更改是将主机从localhost替换为api。原因是docker compose通过服务名称解析主机。由于您的服务名称是api，所以主机也应该是api。

再澄清一点，这里的主机不是来自您机器的预期主机，而是来自vue。js集装箱。从vue。在js容器中，api是一个单独的主机（不再是本地主机）。希望这是有意义的-如果需要更多的澄清，lmk。