时间戳

首页 > 解决方案 > 如何通过 HTTPS 提供内容

angular - 如何通过 HTTPS 提供内容

问题描述

我创建了一个应用程序并将其部署在 DigitalOcean 上，并且我有一个 SSL 证书。有 2 个独立的服务器，1 个用于 angular，它有一个用于 https 重定向的平衡器加载器，一个用于后端，但是当我打开网站时，我在控制台中得到了这个。

Mixed Content: The page at 'https://www.mirrorate.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://165.22.187.137/api/posts?pagesize=2&page=1'. This request has been blocked; the content must be served over HTTPS.

有人可以解释一下吗？或者我如何解决这个问题，谢谢！

标签： angularhttps

解决方案

为了安全起见，您不能通过 http 进行 https 调用。

要解决您的问题，您可以设置 nginx 通过 https 代理您的 http 后端 url。使用 nginx 服务器，您需要调用您的 api，如https://your_domain/api/some_path和 nginx 会将您的请求代理到 api 主机，您将在配置中设置

示例配置。PS - 不要忘记更改您的证书文件路径：

# if you have sockets
upstream socket {
    ip_hash;
    server host:port fail_timeout=0;
}

server { 
    listen [::]:443 ssl ipv6only=on;
    listen 443 ssl default_server;
    root /usr/share/nginx/html;
    index  index.html index.htm;
    include /etc/nginx/mime.types;
    client_max_body_size 50M;

    # server_name YOUR_SERVER_NAME
    ssl_certificate /fullchain.pem;
    ssl_certificate_key /privkey.pem;

    include /options-ssl-nginx.conf;
    ssl_dhparam /ssl-dhparams.pem;

    location /ws/ {
        proxy_pass http://socket;
        proxy_http_version 1.1;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    location /api {
            proxy_pass http://host:port/api;
    }

    location / {
        try_files $uri $uri/ /index.html;
    }
}

推荐阅读