如何避免 Docker 应用程序的混合内容

Question

我在一组 Docker 容器中运行一个基于 Django 的 Web 应用程序，我试图同时包含一个 REST API（使用 django-REST-framework）以及使用它的 ReactJS 应用程序。我所有的其他应用程序都通过 HTTPS 提供服务，但是当 React 应用程序访问 Docker 网络内的 REST API 时，我遇到了Mixed Active Content。 React 应用程序托管在我的 NGINX 容器中，并作为静态站点提供服务。

这是我的 Nginx 容器的相关配置：

# 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;
    }
}

在开发过程中，React 应用程序从网络外部访问我的 REST API，因此资源调用使用 https，如下所示：
axios.get(https://myapp.domain.com/api/) 除了偶尔出现的 CORS 错误之外，一切都相对顺利进行。

但是，现在 React 和 API 都在 Docker 网络中运行，NGINX 不参与容器之间的通信，并且路由如下所示： axios.get(http://web:9000/api)

这给了我更严重的混合活动内容错误。

我见过多个类似的问题，但大多数问题要么不使用 Docker 容器，要么使用我已经在我的配置文件中获得的一些 NGINX 指令。鉴于 Docker 在此类松散耦合应用程序中的流行，我想此类问题的解决方案比比皆是。遗憾的是我没有遇到任何问题，因此，任何建议都将不胜感激。

Answer 1

由于您的应用程序包含来自同一端点的 API 和 Web 客户端，因此您在 nginx 中有一个“网关”，可将所有请求路由到任一端点。到目前为止，常见的做法（尽管您缺少负载均衡器，但这是一个不同的讨论）

对您的 API 的所有请求都应发送至 https。您还应该使用来自同一域的相同证书通过 https 为您的静态站点提供服务。如果不是这种情况，那就是你的问题。

此外，React 应用程序中的所有路由和 URL 都应该是相对的。这意味着反应应用不需要知道你的域是什么。理想情况下，您的 API 也不应该，尽管有时这更难做到。

您的 axios 调用，鉴于 react 应用程序是通过 https 从同一个域提供的，应该是

axios.get(/api)