问题描述：

我注册了一个公司：米扑科技，首页css和js采用了CDN，引用格式如下：

<link rel="stylesheet" href="http://cdn-home.mimvp.com/mimvp.css?ver=1.0.1">

当用 http://mimvp.com 访问时，一切正常，mimvp.css 文件可以正常引用

当用 https://mimvp.com 访问时，会页面排版错误，因为 https 不支持跨协议引用，即 https 引用不了上述 http 的 mimvp.css 文件

 

解决办法：

https的网站中引用http路径的js或css会导致不起作用，其形如：

<link rel="stylesheet" href="http://cdn-home.mimvp.com/mimvp.css?ver=1.0.1">

将http:去掉，改为

<link rel="stylesheet" href="//cdn-home.mimvp.com/mimvp.css?ver=1.0.1">

 

注意：

1. 不加 http 或 https 协议时，当用http协议访问，则使用 http://cdn-home.mimvp.com； 当用 https访问时，则使用 https://cdn-home.mimvp.com

2. CDN域名 cdn-home.mimvp.com 必须要有https证书（ssl证书），否则访问时也会提示错误，需要在网页对 https://cdn-home.mimvp.com 进行一次授权

3. 若没有https证书（ssl证书），推荐使用本地的相对（如：./css/mimvp.css）或绝对路径（//mimvp_home/css/mimvp.css），只需对网站一次授权

4. css、js、png、jpeg、ico等所有元素使用CDN域名 //cdn-home.mimvp.com 时，都可用上述解决方法

 

 

知识拓展： URL 无缝切换 HTTP HTTPS

HTTPS的网站下，如果要访问HTTP资源，那么一般浏览器会弹出窗口询问用户是否允许加载不安全内容的警告提示。

为了避免出现这样干扰用户的情况，所有网页下请求的资源都都必须是HTTPS资源。

如果你的站点支持HTTP和HTTPS两种方式访问，而实际网站只有一份的话，

这种情况下，你可以使用相对Url的方式改写网页内资源的请求Url

 

Url相对路径我们并不陌生，下面这样的写法非常常见。

<img src='/images/myphoto.jpg' />
<img src='myphoto.jpg' />

如果该HTML代码放在 http://mimvp.com/myblog/index.html

那第一幅图片的完整地址是 http://mimvp.com/images/myphoto.jpg

而第二幅图片的实际地址是 http://myexample.com/myblog/myphoto.jpg

但是省略Url中的Scheme部分这样的相对路径写法却比较少见。例如：

<img src='//myimagehosting.com/images/myphoto.jpg' />

这行代码如果放在HTTP的网页上，那么请求的资源就是HTTP://myimagehosting.com/images/myphoto.jpg，如果放在HTTPS上，则访问的资源就是HTTPS的 HTTPS://myimagehosting.com/images/myphoto.jpg

这样一来我们就无需为HTTP和HTTPS各自准备不同的网页了。

 

标准规范

RFC1808文档是专门针对相对URI的，其中提到，除了URI中的Scheme部分，其他部分均可以做适当的省略。

也就是说，这样的写法是不符合规范。RFC1808文档是95年的时候定稿的。

后来的RFC3986文档对URI做出了更为详细的规范，废弃了RFC1808对相对URI引用的建议规范（4.2 Relative Reference一节）。

 

以Scheme:开头的（如http:、file:、ftp:）均为绝对URI引用。否则为相对URI引用。

相对路径 = 相对部分 [ "?" 查询参数] [ "#" 锚点]

 

其中相对部分可以有以下几种情况：

1. //主机域绝对路径或者留空

2. 绝对路径

3. 相对路径

4. 留空

也就是说，以下几种情况均是合法的相对URI引用：

<script src='//myscript.com/script.js?cid=abcd'></script>
<script src='//myscript.com?cid=abcd'></script>
<script src='/script.js?cid=abcd'></script>
<script src='../script.js?cid=abcd'></script>

 

总结

以上这种省略Scheme部分的相对路径的写法在IE7、IE8、Firefox、Chrome、Opera以及Safari中均测试通过。

使用这个特性，可以降低代码的复杂性。

Google Analytics、百度统计、CNZZ统计，都会在生成代码的时候会检测当前协议来决定加载http还是https的脚本，然后动态插入一段脚本。

统计示例： 

<script type = "text/javascript" >
	var _hmt = _hmt || [];
	(function() {
		var hm = document.createElement("script");
		hm.src = "https://hm.baidu.com/hm.js?2470f08b0a4e851aaad12a641ddcb46d";
		var s = document.getElementsByTagName("script")[0];
		s.parentNode.insertBefore(hm, s)
	})(); 
</script>

<script type = "text/javascript" >
	var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
	document.write(unescape("%3Cspan id='cnzz_stat_icon_1262222739'%3E%3C/span%3E%3Cscript 
	src='" + cnzz_protocol + "s22.cnzz.com/z_stat.php%3Fid%3D1262222739%26show%3Dpic' 
	type='text/javascript'%3E%3C/script%3E")); 
</script>

 

实际应用

利用这一原理，也可以使用此方法来实现自适应 http 或 https 请求协议。

例如： 米扑科技首页  mimvp.com

<link rel="stylesheet" href="//cdn-home.mimvp.com/mimvp.css?ver=1.0.1">
<script type="text/javascript" src="//cdn-home.mimvp.com/mimvp-1.0.1.js"></script>

来自动适应不同的 http 或 https 请求