React Django Application разные ip-адреса проблемы CORS

Я пытаюсь развернуть приложение APP1 на EC2 (IP-адрес которого app1_ip): фронтенд создан с помощью React, а бэкенд - с помощью Django, django-rest-framework, gunicorn и nginx. Бэкенд такой же, как и другое приложение APP2, которое уже развернуто на втором EC2 (IP-адрес которого app2_ip).

У меня нет проблем с тем, чтобы заставить второе приложение работать и запрашивать его React frontend (расположенный на порту 3000 из app2_ip) на его backend (расположенный на порту 8000 из app2_ip). С другой стороны, у меня много проблем с запросом бэкенда APP2 с фронтенда APP1. Я что-то упускаю, но не могу понять что.

Я хочу разработать максимально чистую конфигурацию производства.

У меня есть страница входа, на которой пользователю предлагается ввести пароль и имя пользователя. Затем отправляется запрос на внутренний сервер для проверки этих учетных данных.

• Получение запроса со страницы входа в систему, используемой в развертывании бэкенда APP1 :

fetch(`https://{app2_ip}/token-auth/`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })

• nginx.conf файл, используемый в APP2 развертывании бэкенда

upstream django {
    server backend:8000;
}

server {
    listen 80;
    server_name my_server_name
    return 301 https://{my_server_name}$request_uri;
}

server {

    listen 443 ssl;
    server_name ssl.my_server_name;
    client_max_body_size 20G;

    ssl_certificate     /etc/nginx/certs/test.crt;
    ssl_certificate_key /etc/nginx/certs/test.key;
    ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers         HIGH:!aNULL:!MD5;

    location = /favicon.ico { access_log off; log_not_found off; }

    location / {
        proxy_pass http://django;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
        proxy_ignore_client_abort on;

        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, PUT, OPTIONS, POST, DELETE' always;
        add_header 'Referrer-Policy' 'strict-origin-when-cross-origin' always;


        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization,X-Amz-Date';
            add_header 'Access-Control-Max-Age' 86400;
            add_header 'Content-Type' 'text/html; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }
        if ($request_method = 'PUT') {
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization,X-Amz-Date';
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        }
        if ($request_method = 'POST') {
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization,X-Amz-Date';
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        }
        if ($request_method = 'GET') {
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization,X-Amz-Date';
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        }

    }

}

• docker-compose.yml файл, используемый в APP2 развертывании
.

services:

  backend:
    container_name: backend
    build:
      context: .
      dockerfile: ./django/Dockerfile
    command: gunicorn my_application_name.wsgi:application --bind 0.0.0.0:8000
    volumes:
      - '.:/usr/src/'
    expose:
      - 8000
    stdin_open: true

  frontend:
    container_name: frontend
    build:
      context: .
      dockerfile: ./react/Dockerfile
    volumes:
      - '.:/app'
      - '/app/node_modules'
    ports:
      - 3000:3000

  nginx:
    build:
      context: .
      dockerfile: ./nginx/Dockerfile
    ports:
      - 1337:80
      - 443:443
    depends_on:
      - backend

• ошибка, которую я получаю при получении бэкенда APP2 из фронтенда APP1: Экстракт сети Генерал Заголовки ответа Заголовки запросов Заголовки заявлений - предварительные

Если у вас есть идеи, которые могут мне помочь, пожалуйста, не стесняйтесь поделиться ими. При необходимости я могу предоставить больше информации об используемых конфигурациях.

EDIT: Еще одно странное поведение :

• когда я подключаюсь к фронтенду APP1, ничего не делая перед этим, я получаю ошибку, описанную выше;
• когда я подключаюсь к фронтенду APP2, отключаюсь и затем подключаюсь к фронтенду APP1, я не получаю ошибку и все работает...

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