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 完整配置如下：