我正在运行一个反应应用程序和一个带有docker-compose的json服务器。
通常我通过以下方式从我的反应应用程序连接到 json 服务器：
fetch('localhost:8080/classes')
.then(response => response.json())
.then(classes => this.setState({classlist:classes}));
这是我的码头工人撰写文件：
version: "3"
services:
frontend:
container_name: react_app
build:
context: ./client
dockerfile: Dockerfile
image: praventz/react_app
ports:
- "3000:3000"
volumes:
- ./client:/usr/src/app
backend:
container_name: json_server
build:
context: ./server
dockerfile: Dockerfile
image: praventz/json_server
ports:
- "8080:8080"
volumes:
- ./server:/usr/src/app
问题是我似乎无法让我的 react 应用程序从 json 服务器获取此信息。
在我的本地机器上，我使用 192.168.99.100：3000 查看我的 react 应用程序
我使用 192.168.99.100：8080 查看 json 服务器，但我似乎无法将它们与以下任何一项连接起来：
backend:8080/classes
json_server:8080/classes
backend/classes
json_server/classes
{host:"json_server/classes", port:8080}
{host:"backend/classes", port:8080}
react 应用程序和 json 服务器都可以在 docker-compose up 下独立运行。
我应该在 fetch(( 中放入什么？
请记住，React 应用程序总是在某些用户的浏览器中运行;它不知道 Docker 参与其中，并且无法访问或使用任何与 Docker 相关的网络设置。
在我的本地机器上，我使用 [...] 192.168.99.100：8080 查看 JSON 服务器
那么这也是你在 React 应用程序中所需要的。
您可以考虑在此代理前面设置某种代理，例如，可以将以/api开头的 URL 路径转发到后端容器，并将其他 URL 转发到前端容器(或者更好的是，运行像 Webpack 这样的工具将您的 React 应用程序编译为静态文件并直接提供(。 如果你有这样的设置，那么 React 应用程序可以使用没有主机的路径/api/v1/...，并且它将相对于浏览器认为的"当前主机"进行解析，这通常是代理。
您有两种解决方案：
- 在快速服务器上使用 CORS 请参阅 https://www.npmjs.com/package/cors
- 使用 NGINX 设置代理/反向代理