title: How To Avoid Mixed Content with Docker Apps
body: <p>I am running a Django based web application inside a set of Docker containers and I'm trying to include both a REST API (using django-REST-framework) as well as the ReactJS app that consumes it.  All my other apps are served over HTTPS but I am running into <code>Mixed Active Content</code> when it comes to the React app hitting the REST API inside the Docker network.  The React App is being hosted within my NGINX container and served up as a static site.</p>
  
  <p>Here's the relevant config for my Nginx container:</p>
  
  <pre><code># SSL Website
  server {
      listen       443 http2 ssl;
      listen      [::]:443 http2 ssl;
      server_name    *.domain.com;
  
      ssl_protocols               TLSv1 TLSv1.1 TLSv1.2;
      ssl_ciphers EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
      ssl_prefer_server_ciphers   on;
      ssl_certificate             /etc/nginx/ssl/my_cert.crt;
      ssl_certificate_key         /etc/nginx/ssl/my_key.key;
      ssl_stapling on;
      ssl_stapling_verify on;
  
      access_log /home/logs/error.log;
      error_log /home/logs/access.log;
  
      upstream django {
          server web:9000;
      }
      location /
      {
          include            uwsgi_params;
  
          # Proxy settings
          proxy_pass         http://django;
          proxy_http_version 1.1;
          proxy_buffering off;
          proxy_set_header Host $http_host;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection "upgrade";
      }
      # REACT APPLICATION 
      location /faqs {
          autoindex on;
          sendfile  on;
          alias /usr/share/nginx/html/faqs;
      }
  }
  </code></pre>
  
  <p>The during development the React app was hitting my REST API from outside the network so resources calls used https like so:<br>
  <code>axios.get(https://myapp.domain.com/api/)</code>
  and everything went <em>relatively</em> smoothly, barring the occasional CORS error.</p>
  
  <p>However, now that both the React and the API are running inside the Docker network NGINX is not involved in the communication between containers and the routes are like so:
  <code>axios.get(http://web:9000/api)</code></p>
  
  <p>This gives me the aggravating Mixed Active Content Error.</p>
  
  <p>I've seen multiple questions similar to this but most are either not using Docker containers or use some NGINX directives I've already got in my config file.  Given the popularity of Docker for these kind of loosely coupled applications I would imagine solutions abound for this kind of problem.  Sadly I have not managed to come across any and as such, any suggestions would be greatly appreciated.</p>