由于本人的VPS资源有限,所以将一些静态的资源放在了一个BAE上,本来使用得挺好的,但今天在使用Semantic-UI的时候,发现图标不能显示,打开Chrome控制台发现有错误提示:

Font from origin has been blocked from loading by Cross-Origin Resource Sharing policy

确定是跨域源资源共享(CORS)的问题,跨域问题简单来说就是

CORS(Cross-Origin Resource Sharing)规范在服务器支持跨站请求的情况下,使用XMLHttpRequest 对象从网页发送和接收跨域HTTP 请求。接收请求的服务器必须返回Access-Control-Allow-Origin头信息,值为*或者发送请求的原域名。如果其中不包含原域名,请求会失败。

由于BAE不可能因为我个人的一个需求,马上做出变动,所以只有自己相办法解决了。

前面说了,因为资源有限,不想加大VPS负载,并且在全国各个地方都能达到理想的连接速度,那必定要用到CDN加速了,因为经常用到海词查单词,感觉其速度不错,然后就发现了它加速乐,看了下免费套餐,一小时3G流量,完全够用了,并且支持回源,所以应该不存在不能访问的问题。

服务器上用的Nginx做的转发服务器,所以只用在配置文件里加上一条Header信息,允许ACAO信息即可。

server {
    listen 80;
    server_name static.codelogger.org;

    root /var/www/codelogger.org/static;
    location ~* \.(eot|ttf|woff) {
        add_header Access-Control-Allow-Origin *;
    }
}

这里我配置是的是 *,表示对所有域名开放。如果你要对指定网站开放,只需要把*改为你的白名单域名,如http://www.codelogger.org这样就可以了。

其它配置:

  • add_header Access-Control-Allow-Credentials true; 是否允许请求带有验证信息。
  • add_header Access-Control-Allow-Methods 'GET';限定请求的方法,可以是GET,POST等,用逗号分开。
  • add_header Access-Control-Max-Age 600;缓存此次请求的秒数。在这个时间范围内,所有同类型的请求都将不再发送预检请求而是直接使用此次返回的头作为判断依据,非常有用,大幅优化请求次数。

更多配置请参看W3C-CORS

注:
Access-Control-Allow-Origin设置为允许来自所有域的跨域请求。那么cors的安全机制几乎就无效了。xmlhttprequest发送的请求需要使用“withCredentials”来带上cookie,如果一个目标域设置成了允许任意域的跨域请求,这个请求又带着cookie的话,这个请求是不合法的,浏览器会屏蔽掉返回的结果。




如果您觉得这篇文章对您有所帮助, 点我, 可以请我喝杯咖啡。
< 支付宝 | 微信 >
Published with Hexo and Theme by Kael
Flag Counter
X