Не удается отправить http-запрос из React в Django, используя nginx и certbot

У меня есть docker swarm, где я настроил приложение React на порт 3000, Django backend на порт 8000, nginx и certbot. На фронтенде все работает отлично, и все маршруты имеют ssl. Однако, когда я пытаюсь отправить запрос из приложения React в Django, происходит сбой. Желаемое поведение:

        1.Access frontend on http 
        2.Nginx forwards it to https
        3.Https frontend sends http request to Django
        4.Django sends back a http request which is forwarded to https by nginx

Сбой происходит на шаге 4, где возникает ошибка из-за того, что https и http пытаются взаимодействовать друг с другом. Я отправляю запрос следующим образом:

fetch("http://example.com:80/app/receipt")

и получаем ошибку

login.js:55 Mixed Content: The page at https://example.com/login' was loaded over HTTPS, but requested an insecure resource <the same route but http>. This request has been blocked; the content must be served over HTTPS.

Я понимаю, в чем проблема, но я не настроил https отдельно в моем бэкенд-приложении и надеялся, что есть способ сделать это только из файла конфигурации nginx. Из того, что я читал, создание самоподписанного сертификата - не самая лучшая идея. В настоящее время я не понимаю, как я могу получить доступ к фронтенду по http, который nginx делает https, но не наоборот для http-запросов. (Я что-то упускаю?)

Это мой файл nginx.conf:

user nginx;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;
error_log /var/log/nginx/error.log warn;

events {
    worker_connections 1024;
}

http {
    include /etc/nginx/mime.types;
    fastcgi_read_timeout 300;
    proxy_read_timeout 300;
    sendfile on;

    server {
    # redirect from http to https
    listen 80;
    server_name mydomain.com;
    return 301 https://$host$request_uri;
  }

    server {
        listen 443 ssl;
        server_name mydomain.com;
        client_max_body_size 4M;
        ssl_certificate     /etc/letsencrypt/live/mydomain.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/mydomain.com/privkey.pem;
        ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
        ssl_ciphers         HIGH:!aNULL:!MD5;

        location ^~ /.well-known/ {
        # allow LE to validate the domain
        root   /usr/share/nginx/html;
        allow all;
        }

        location /app/ {
            proxy_pass          http://web:8000/app/;
            proxy_set_header    X-Forwarded-For $remote_addr;
        }

        location / {
            proxy_pass          http://frontend:3000/;
            proxy_set_header    X-Forwarded-For $remote_addr;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
        }
    }
}

В случае, если понадобится мой файл стека докеров, я добавлю его в качестве правки. У вас есть идеи, смогу ли я настроить эту установку, чтобы она работала?

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