上下文

我目前正在做一个多容器项目，涉及react、django和（最终）几个数据存储，所有这些都是容器化的，并通过docker-compose绑定在一起。这些都是在vscode devcontainers中开发的。主机操作系统为Windows 11。

问题

我可以通过浏览器（和Django的API web接口）向我的Django API发出请求。但是，我不能通过前端服务向API发出请求。使用JavaScript fetch API，我无法向以下任何对象发出请求

• localhost:8000（注：许多啧啧的说，这应该功能刚刚好）
• 0.0.0.0:8000（注：这至少会抛出NS_ERROR_CONNECTION_REFUSED错误，该错误仍然无法解决）
• host.docker.internal:8000
• 192.168.99.100:8000
• 172.24.0.2:8000

What I've Tried

• 使用Django正确配置CORS
• 确保所有适当的端口都在Docker中公开和转发
• 重新实现整个项目，并根据其他一些半吊子教程。两次

详情

后端Dockerfile

FROM  python:3.10-alpine
ENV PYTHONUNBUFFERED=1
WORKDIR /app
COPY . . 
RUN apk add poetry && poetry install
EXPOSE 8000

前端Dockerfile

FROM node:lts-alpine
WORKDIR /app
COPY . .
RUN yarn install
EXPOSE 3000
CMD ["yarn", "start"]

docker-compose.yml

services:
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/frontend
    depends_on:
      - backend
  backend:
    build: ./backend
    ports:
      - "8000:8000"
    volumes:
      - ./backend:/backend
    command: "poetry run python manage.py runserver 0.0.0.0:8000"

Django Settings.py

ALLOWED_HOSTS = ["0.0.0.0"] # ADDED CORS
# Application definition
INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "corsheaders", # ADDED CORS
]
CORS_ORIGIN_WHITELIST = [
    "http://localhost:3000" # ADDED CORS
]
MIDDLEWARE = [
    "django.middleware.security.SecurityMiddleware",
    "django.contrib.sessions.middleware.SessionMiddleware",
    "corsheaders.middleware.CorsMiddleware", # ADDED CORS
    "django.middleware.common.CommonMiddleware",
    "django.middleware.csrf.CsrfViewMiddleware",
    "django.contrib.auth.middleware.AuthenticationMiddleware",
    "django.contrib.messages.middleware.MessageMiddleware",
    "django.middleware.clickjacking.XFrameOptionsMiddleware",
]

React App.tsx

const App = () => {
  const [currentTime, setCurrentTime] = useState(0);
  const [currentDate, setCurrentDate] = useState(0);
  useEffect(() => {
    fetch(`http://localhost:8000`)
      .then((res) => res.json())
      .then((data) => {
        setCurrentTime(data.time);
        setCurrentDate(data.date);
      });
  }, []);
  return (
    <div className="App">
      <header className="App-header">
        <p>
          The date is {currentDate} and the time is {currentTime}.
        </p>{" "}
        <br />
      </header>
    </div>
  );
};