随笔记】在HTTPS下加载HTTP的资源"/>
【随笔记】在HTTPS下加载HTTP的资源
【随笔记】在HTTPS下加载HTTP的资源
水滴石穿，遇到即是缘分。
首先现在HTTPS加密的网站内，不在支持加载HTTP类型的资源。但是很多时候我们可以保证自身的网站是HTTPS加密的，当有异系统对接时，无法保证这件事，现在浏览器侧有拒绝这种行为，非常的难做、难实现。
代理策略
通过Nginx进行代理中转，这个策略是相对网上很多方式中，最简单的，最稳妥的。
例子：，我们需要怎么做？
- 将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>
简单明了，完美解决https中使用http资源的问题；重点是这种方式合规安全可靠。
更多推荐
【随笔记】在HTTPS下加载HTTP的资源
发布评论