可搜索,可注册,可登录,致敬逗比大佬!尽在救援版逗比根据地 dbgjd.com
投稿文章 | 广告合作 | Telegram 群组 / 公告频道 / 使用教程

配置CORS小记

News johng1969 54℃ 0评论

最近在折腾博客的字体,最终选定了这几个字体作为网站的字体 莫名绕口

问题来了,在方正网站上面获取字体的授权是非商业的授权。即使我都是非商业的用途,但是为了减少我的风险,我还是选择把字体和项目分开(怕死.jpg)。

emmmmm 我不把字体整进主题里面我怎么去使用字体咧?网上的 font CDN 也不大可能有方正的字体…

最后就把字体放上了一个资源服务器 cdn.lvcshu.info 我的图片之类的外链的东西都全部扔在上面,就把字体扔到了 https://cdn.lvcshu.info/font/ 上面,如果你打开 F12->network 然后刷新的话,应该能发现有两个后缀为 ttf 的资源是从 cdn.lvcshu.info 加载的。

配置 CORS

事情并没有那么简单,从别的域名引用是一种叫做跨域请求的请求 莫名绕口×2 ,但是这种请求会撞上浏览器的一种叫做 Same-origin policy(同源策略) 的安全策略,好消息是这个策略也有相应的绕过方法 Cross-origin resource sharing(CORS 跨来源资源共享) 这种技术规范就可以通过添加标头来进行资源的跨域名调用。顺便他还可以对资源的调用范围作出限制,毕竟我可不想碰到方正的法务团队()。

具体配置如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
location /font {
set $cors_origin "";
if ($http_origin ~* "^https://blog.lvcshu.com$") {
set $cors_origin $http_origin;
}
if ($http_origin ~* "^https://johnpoint.github.io$") {
set $cors_origin $http_origin;
}
if ($http_origin ~* "^https://lvcshu.netlify.com$") {
set $cors_origin $http_origin;
}
if ($request_method = 'OPTIONS') {
return 204;
}
add_header Access-Control-Allow-Origin $cors_origin always;
add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, PATCH, DELETE, HEAD" always;
add_header Access-Control-Max-Age 86400 always;
}

修改 CSS

但是如果在主题的项目 CSS 里面写死我的 url 的话,因为上面有域名限制是不会生效的,可不能这样误导别人啊 QAQ,所以就把 CSS 的字体的声明在项目中删去了,要想正确加载字体只需要在 all.css 中加入这一句

1
2
@font-face{font-family:"FZJL";src:url('字体所在url')}
@font-face{font-family:"FZLT";src: url('字体所在url')}

即可生效

参考

转载请注明:逗比根据地 » 配置CORS小记

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址