在开发过程中，我应该使用哪个url从浏览器向容器发出请求

Question

我有两个服务，一个客户端和一个服务器。我在客户端使用Next.js和React，在服务器上使用express。我有一个docker撰写的文件。我需要在后端实现一些端点，并使用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组成文件

Answer 1

假设您在发出post请求的变量地址中有一个属性。

address = { 'id': 123 };

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

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

Answer 2

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

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

您也可以在Webpack dev-server代理配置中设置此地址，这样代码中的/address相对URL现在就可以继续工作了。