前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >nginx 授权资源跨站访问

nginx 授权资源跨站访问

作者头像
后端技术探索
发布2018-08-09 15:34:33
6410
发布2018-08-09 15:34:33
举报
文章被收录于专栏:后端技术探索

最近一h5前端同事反馈说某个字体库连接(类似于http://www.example.com/test.ttf)无法访问。

身为后端开发工程师,其实一下子没有明白是怎么回事,于是先去详细了解了一下前端的使用场景,是这样的,前端网页需要使用一种不常见字体,这种字体库一般不在操作系统支持的范围内,前端技术使用的方案是把一份字体包(ttf文件)放在服务端,然后在网页中的css样式中去引用改字体文件,进而使用。

而且注意到,网页和字体不在一个域内,还做了个小实验,在本域内的网页是可以使用该字体库的。

这样问题就比较清晰了:ttf资源文件怎么能被跨域访问到?

如果是ajax请求,我们可能会想到jsonp的技术方案来解决就行了。但是这儿只是在css中对一个字体文件的引用,jsonp就爱莫能助了。

在html5兴起之后,现在有一种已经被大部分浏览器所支持的 Access-Control-Allow-Origin 方案,也能解决跨域问题,而且能解决我遇到的这个问题。

Access-Control-Allow-Origin 是http response 头信息的一个字段,拿该问题为例,访问字体文件也是一个HTTP请求,如果response头信息Access-Control-Allow-Origin的值包含当前页面的域,浏览器才允许继续使用该字体文件。

基本上, 这是一个http的header, 用在返回资源的时候, 指定这个资源可以被哪些网域跨站访问.

比方说, 你的图片都放在 source.example.com 这个域下, 如果在返回的头中没有设置Access-Control-Allow-Origin , 那么别的域是不能外链你的图片的.

当然这要取决于浏览器的实现是否遵守规范. 因为chrome最近的升级开始检查这个头了, 所以导致一些网站资源加载不进来.

解决方法就是 在资源的头中 加入 Access-Control-Allow-Origin 指定你授权的域. 我这里无所谓,就指定星号 * , 任何域都可以访问我的资源.

代码语言:javascript
复制
Access-Control-Allow-Origin: *

具体操作方法, 就是在nginx的conf文件中加入以下内容:

代码语言:javascript
复制
location / {
  add_header Access-Control-Allow-Origin *;}

nginx 完整配置如下:

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2015-11-30,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 nginx 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档