nginx 授权资源跨站访问

最近一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 指定你授权的域. 我这里无所谓,就指定星号 * , 任何域都可以访问我的资源.

Access-Control-Allow-Origin: *

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

location / {
  add_header Access-Control-Allow-Origin *;}

nginx 完整配置如下:

原文发布于微信公众号 - nginx(nginx-study)

原文发表时间:2015-11-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DeveWork

WordPress 开发之让浏览器自动加载最新的CSS、JS文件(免刷新缓存)

在开发WordPress 主题的时候,如果频繁更新主题的CSS、JS文件但主题已经上线,如何让访客的浏览器获取最新的CSS、JS文件而非等到浏览器删除缓存后?下...

21110
来自专栏技术墨客

构建用于生产的React静态化单页面服务 原

React 作为一项热门的前端开发技术,现在使用它的团队越来越多。之前也介绍了react 的所有的特性,但是仅仅了解怎么开发 react 只走了万里长征的第一步...

5774
来自专栏张善友的专栏

使用密码记录工具keepass来保存密码

在第一章,曾经给过您建议,密码不要保存在文档中,那样不安全,如果密码很多而且又很复杂,人的大脑是不可能很容易记住的,只能记录下来,如果不能记在文档中那记在哪里呢...

4109
来自专栏十月梦想

node读取html文件

node和Apache是没有web容器的,node的目录下的同级文件是无法使用/filename进行访问的,因为node没有根目录门也没用web容器!

1432
来自专栏我的博客

Mac下配置安卓开发环境

1.下载 android-sdk_r10-mac_x86 3.0.zip(原因是因为不能下载!!!所以只好下载这个,然后更新!!!需要的可以留言给我) ec...

4139
来自专栏云计算教程系列

如何在CentOS 7上使用InfluxDB分析系统指标

InfluxDB是一个时间序列,指标和分析数据库。时间序列数据库旨在解决存储在一段时间内进行的连续测量所产生的数据的问题。此数据可能包含系统指标(如CPU和内存...

1631
来自专栏DeveWork

WordPress 开发之让浏览器自动加载最新的CSS、JS文件(免刷新缓存)

在开发WordPress 主题的时候,如果频繁更新主题的CSS、JS文件但主题已经上线,如何让访客的浏览器获取最新的CSS、JS文件而非等到浏览器删除缓存后?下...

2448
来自专栏Android干货

Android Studio 之 注释模板

4727
来自专栏wym

Linux ubntu 下操作

ls 显示当前下面的文件及文件夹 ls -a 显示当前目录下的所有文件及文件夹包括隐藏的.和..等 ls -al 显示当前目录下的所有文件及文件夹包括隐藏的.和...

1502
来自专栏一“技”之长

iOS 封装静态库(.a文件) 原

iOS中导入外部文件,一种是将源码导入,一种是导入静态库,有很多第三方库都是以静态库的形式提供给我们使用的,如何制作一个静态库呢?

903

扫码关注云+社区

领取腾讯云代金券