Получение ошибки CORS только при запуске приложения django через docker-compose

У меня есть приложение Django backend, использующее Django-rest-framework. В настоящее время я разрабатываю фронтенд с помощью React, используя Axios для выполнения HTTP-запросов.

Когда я запускаю свое приложение с помощью python manage.py runserver и делаю запрос от клиента React, я получаю ожидаемый ответ.

Тем не менее, если я запускаю свое приложение с помощью docker-compose, я получаю ответ Нет заголовка 'Access-Control-Allow-Origin' на запрашиваемом ресурсе.

Это мой docker-compose.yaml

services:
  db:
    image: postgres
    volumes:
      - /var/lib/docker/volumes/mobilequoter/db/data:/var/lib/postgresql/data
    ports:
      - ${DB_PORT}:5432
    environment:
      - POSTGRES_USER=${DB_USER}
      - POSTGRES_PASSWORD=${DB_PASSWORD}
      - POSTGRES_DB=${DB_NAME}
  web:
    build: .
    command: gunicorn mobilequoter.wsgi --bind 0.0.0.0:${PORT}
    env_file: .env
    volumes:
      - .:/code
    ports:
      - 8000:${PORT}
    environment:
      - DB_HOST=db
      - DB_PORT=5432
    depends_on:
      - db

Вот мой settings.py (с настройками, связанными с CORS:

)

handler = EnvHandler()

SECRET_KEY = handler.SECRET_KEY
DEBUG = handler.DEBUG
ALLOWED_HOSTS = handler.ALLOWED_HOSTS
CORS_ALLOWED_ORIGINS = handler.CORS_ALLOWED_ORIGINS
SHELL_PLUS = 'ipython'

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    #  third party
    'rest_framework',
    'drf_yasg',
    'storages',
    'django_extensions',
    'corsheaders',

    #  local
    'mobilequoter.helper',
    'mobilequoter.authentication',
    'mobilequoter.client',
    'mobilequoter.quote',
    'mobilequoter.sale',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

Вот мои переменные env, связанные с хостами:

ALLOWED_HOSTS=127.0.0.1,localhost
CORS_ALLOWED_ORIGINS=http://127.0.0.1:3000,http://localhost:3000

Это мой клиент Axios:

import axios from "axios";

const axiosClient = axios.create({ baseURL: process.env.REACT_APP_BACKEND_URL });

export default axiosClient;

REACT_APP_BACKEND_URL=http://localhost:8000/api/

Здесь я делаю запрос:

import axiosClient from "../../../config/axios";
import { login, logout } from "../slices/auth";

export const loginAction = (data) => async (dispatch) => {
  try {
    const response = await axiosClient.post("auth/access/", data);
    console.log(response.data);
    dispatch(login(response.data));
  } catch (err) {
    throw new Error(err);
  }
};

export const logoutAction = () => async (dispatch) => {
  try {
    dispatch(logout());
  } catch (err) {
    throw new Error(err);
  }
};

Вот что я получаю при использовании docker-compose

Вот что я получаю с помощью runserver

Вернуться на верх