在https页面,通过iframe实现http跨域访问(解决mixed content)
解决浏览器mixed content报错
[问题背景]:
对PI KVM进行客制化时,需要实现以下效果:在https的主页面中,实现在iframe中访问http协议的资源(访问的资源仅支持http协议)。
或者说,https中通过iframe方式调用http资源(跨域)失败,控制台显示mixed content。
[问题解决]:
1.前置知识:
1.1.同源:
两个页面具有相同的协议(protocol),主机(host)和 端口号(port),即 “指在同一个域”。
1.2. 跨域:
违反上述三要素中的一个,即称为 “跨域访问”。
2.访问的资源支持https时的解决办法:
直接百度即可,网上提供的大多都是这类情况的解决办法。
3.访问的资源只支持http:
当我们访问服务器时,简易流程如下:
浏览器 >> nginx / 其它代理 >> 服务器具体内容
这里以使用nginx为例。nginx可以对需要访问的服务器做反向代理,来实现跨域访问。
具体步骤如下:
a. 找到nginx配置文件的位置:
我的nginx配置文件,将主要配置写在了单独文件 kvmd.ctx-server.conf 中,在nginx配置时,它会被include到nginx.conf中。所以这里我直接修改 kvmd.ctx-server.conf。
b.修改配置文件
在location字段,添加匹配字段,对符合匹配要求的字段,进行转发(类似于重定向,也即:原先地址是虚假的地址,修改后的才是真实地址)。
#这里的 /cam/stream其实指的是原先地址后增加的部分。
#例如:https://1.1.1.1/cam/stream, 而不是https:///cam/stream
location /cam/stream {
proxy_pass http://172.16.80.168:8766/stream;
}
location
字段可以添加更多复杂的匹配方法,来实现更加精确的匹配效果。
proxy_pass
后添加你需要的真实地址(在这里,我需要的是非https的地址)。
-
示例中的写法非常简单,只是提供一个sample。如果你需要优化的写法,可以搜索“nginx语法”自行优化。
c.保存,然后重启服务器
这样一来,访问 https://1.1.1.1/cam/stream
时就会被nginx自动映射为 http://172.16.80.168:8766/stream
, 从而绕过浏览器的mixed content,实现跨域访问。
d. 其他方法
除了nginx反向代理,还尝试了将http升级成https。
简单来说,就是给 指定ip地址+端口 颁发SSL证书,使其变成https。(不过在申请时报错了,似乎是不支持指定端口,所以这个办法是否可用暂未确定)
更多推荐
所有评论(0)