【随笔记】在HTTPS下加载HTTP的资源-CSDN博客

本文链接：https://blog.csdn.net/hao114500043/article/details/116928419

【随笔记】在HTTPS下加载HTTP的资源

水滴石穿，遇到即是缘分。
首先现在HTTPS加密的网站内，不在支持加载HTTP类型的资源。但是很多时候我们可以保证自身的网站是HTTPS加密的，当有异系统对接时，无法保证这件事，现在浏览器侧有拒绝这种行为，非常的难做、难实现。

代理策略

通过Nginx进行代理中转，这个策略是相对网上很多方式中，最简单的，最稳妥的。

例子：https://ip的网站去加载一个http地址的1.mp4文件，我们需要怎么做？

将1.MP4文件地址进行代理，发布出一个HTTP的网络地址

server {
        listen       9878;
        server_name  127.0.0.1;
		
		
		location / {
            root   demo;
            location ~ \.mp4$ {
              mp4;
           }
        }

		
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

这里还是通过Nginx的能力，将1.mp4发布出一个http的网络地址；如果你不是媒体资源，是数据资源也同样通用。

自身https网站的Nginx需要增加代理映射，将https路径代理http地址

server {
        listen       9875 ssl;
        server_name  127.0.0.1;
		ssl_certificate     httpsConfig/server.crt;
		ssl_certificate_key httpsConfig/server.key;
		ssl_session_cache    shared:SSL:1m;
		ssl_session_timeout  5m;
		ssl_ciphers  HIGH:!aNULL:!MD5;
		ssl_prefer_server_ciphers  on;
		
		location / {
            root   demo;
            index  index.html dataIndex.html index1.html;
        }
		location ~* .(mp4)$ {
        
        proxy_connect_timeout 60;
        proxy_read_timeout    60;
        proxy_send_timeout    60;        
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header Cookie $http_cookie;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
        proxy_pass http://127.0.0.1:9878;
 
         if (-f $request_filename) {
           expires max;
           break;
			}
		}
	}

当https://ip:9875这个地址内部访问1.mp4这个资源，会自动代理到127.0.0.1:9878这个地址上（就是上面步骤中发布的http视频地址）；

我们看一下html中是如何调用这个资源的

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="css/toastr.min.css" />
    <link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" />
    <link type="text/css" rel="stylesheet" href="css/layout.css" />
    <link type="text/css" rel="stylesheet" href="css/theme.css" />
</head>

<body>
    <video src="https://127.0.0.1:9875/1.mp4" muted="muted" autoplay="autoplay"></video>
</body>

</html>