[问题背景]：

对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。（不过在申请时报错了，似乎是不支持指定端口，所以这个办法是否可用暂未确定）