通过 RawGit 来引用 Gist 或 Github 的 raw 文件以获取正确的 Content-Type

昨天在修改博客模板时需要引用几个外部的 js 和 css 文件,但是因为网址不是 https,所以我就把代码下载下来后传到了我的 Github 作为几条 Gist,然后再引用 Gist 的 raw 文件,网址就是 https 的了。

链接好了外部调用的文件,我打开浏览器刷新后却没有出现我想要的效果。我还以为链接写错了,没有正确的引用,可是我在开发者工具下明明看到文件已经下载了,但是我注意到我从 Github 引用的 js 代码的文档类型不是 js 而是 plain,这是怎么回事呢? 搜索之后找到了答案,原来 Github 为了防止 raw 文件的 hotlinking/滥用(参考:https://github.com/blog/1482-heads-up-nosniff-header-support-coming-to-chrome-and-firefox)而添加了一个 X-Content-Type-Options: nosniff ,如此以来浏览器会把文件看成是 Content-Type: text/plain ,而不是 Javascript 或者 CSS,如下图所示:

Content-Type 对比-截图

那么有没有什么解决办法呢?老外早都想好了,有人创建了一个 rawgit.com 网站,通过这个网站来引用 Github 的 raw 文件就可以得到正确的 Content-Type,我们只需要把 Github 的网址替换成 RawGit 的就行了,如下图所示:

把 Github 的网址替换成 rawgit 的-截图

需要注意一点,这个网站提供两种链接,一种是 cdn.rawgit.com,一种是 rawgit.com,前者有 CDN 加速而且设置的浏览器过期时间非常长(cache-control:max-age=315569000),没有使用限制,适合用于生产环境,后者有使用限制,但是过期时间很短,适用于开发环境。