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

Question

我在一组Docker容器中运行了一个基于Django的Web应用程序，并且试图同时包括一个REST API（使用django-REST-framework）以及使用它的ReactJS应用程序。 我所有其他应用程序均通过HTTPS进行服务，但是当涉及React应用程序在Docker网络内部使用REST API时，我遇到了Mixed Active Content 。 React App被托管在我的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应该是相对的。 这意味着react应用程序不需要知道您的域是什么。 您的API也不理想，尽管有时很难做到。

您的axios调用应该是：

axios.get(/api)