在开发过程中，我应该使用什么 url 从浏览器向容器发出请求？答案

【问题标题】：What url should I use to make a request to the container from the browser during development?在开发过程中，我应该使用什么 url 从浏览器向容器发出请求？
【发布时间】：2021-03-24 02:39:42
【问题描述】：

我有两个服务，一个客户端和一个服务器。我在客户端上使用Next.js 和React，在我的服务器上使用express。我有一个 docker-compose 文件。我需要在后端实现一些端点，并使用axios 从客户端向后端发出请求。

在开发过程中，我正在运行docker-compose up。在开发应用程序时，我在客户端创建了一个地址表单，并希望在浏览器中查看结果。当我尝试提交表单并将请求发送到服务器时，我收到了404。这是客户端向后端发出请求的代码：

import axios from 'axios'

const postNewAddress = async (address) => {
  axios.post('/address', address)
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
  }

 module.exports = {
   postNewAddress
 }

这是我目前在后端拥有的：

const express = require( 'express' );

const app = express();
const port = process.env.PORT || 3001

app.use(express.json())

app.get( '/', ( req, res ) => {
  res.send({ greeting: 'Hello world!' });
});

app.post('/address', ( req, res ) => {
 const address = req.body
 console.log(address)
 res.json(address)
})

app.listen(port, err => {
 if (err) throw err;
 console.log(`Listening on PORT ${port}!`)
})

当我在 axios 请求中将 URL 更改为 http://server:3001/address 时，我收到 net::ERR_NAME_NOT_RESOLVED 错误。我做了一些研究，这可能是因为浏览器和 docker 容器在不同的网络中运行。但我找不到任何可以让我从浏览器向容器发出请求的解决方案。

这是docker-compose.yml的要点

Docker compose file

【问题讨论】：

标签： docker express docker-compose axios next.js

【解决方案1】：

浏览器应用程序永远不能使用 Docker 容器主机名。即使应用程序是从内部 Docker 提供的，它最终也会从浏览器内部和 Docker 空间外部运行。

如果这是一个开发系统，那么后端容器和你的开发环境在同一个系统上，一般可以连接localhost和你的容器发布的ports:。如果您的docker-compose.yml 声明ports: [3001:3001] 为后端，那么您可以连接到http://localhost:3001/address。

您还可以在 Webpack dev server proxy 配置中设置此地址，因此您在代码中拥有的 /address 相对 URL 现在可以继续工作。

【讨论】：

【解决方案2】：

假设您在可变地址中有一个属性，用于发出发布请求。

address = { 'id': 123 };

现在要在后端代码中获取它，您需要执行类似的操作

app.post('/address', ( req, res ) => {
 const id = req.body.id
 console.log(id)
 res.json(id)
})

【讨论】：