React App 无法通过获取或 axios 到达 API 容器

Question

我有 2 个 docker 容器，一个运行 React App，另一个运行 Node Express API。这是我的docker-compose.yml文件：

version: '3.8'

services:
  node-api:
    build: ./node-api
    ports:
      - 9000:9000
    restart: 
      on-failure

  react-app:
    build: ./react-app
    ports:
      - 3000:3000
    depends_on:
      - node-api

当我尝试使用 fetch 调用 API 时，出现“CORS 请求未成功”错误。 CORS 在后端启用：

const express = require("express");
const cors = require("cors");

const app = express();
app.use(cors());

这里还有一个 function 在 React App 中调用 API：

const handleContentClick = async () => {
   let url = `http://node-api:9000/api/content`;
   const response = await fetch(url);
   const data = await response.json();
}

我尝试将 CORS origin 显式设置为 react-app 容器，但这没有帮助。

让我感到困惑的一件事是，当我进入 react-app 容器并尝试使用 curl 或节点访问 API 时，我得到了来自 API 的响应。为什么它可以通过节点和 curl 从同一容器访问，而不是来自 React App？

我也尝试用 axios 替换 fetch，但仍然报错（这次是 ERR.NETWORK 报错）。

另外，当我在本地机器上运行它时一切正常，但是一旦我尝试在远程主机上运行它，这些错误就出现了。

你有什么建议吗？

Answer 1

React APP 由容器提供服务，但它是在浏览器中呈现的，我在 localhost:3000 图片。

node-api 后端从 docker 容器暴露到 localhost:9000，所以要在 react 中使用的 url 应该是： http://localhost:9000/api/content

和 CORS 应该配置为允许localhost:3000