年末项目组要搞个周年庆活动,需要上一个html5的小游戏,由于我有写过 Cocos2d-x,就打算用js版本做个网页小游戏,遇到了经典的ajax跨域的问题。还试出来一些奇淫绝技。
Ajax 跨域
跨域不外乎一下几种情况,是由于安全问题,浏览器不允许js跨域访问。
URL | 结果 | 原因 |
---|---|---|
a.b.com/image.png | 成功 | |
a.b.com/res/a.png | 成功 | |
a.b.com/res/b.png | 失败 | 协议不同 |
a.b.com:8080/res/b.png | 失败 | 端口不同 |
g.b.com/res/c.png | 失败 | 主机名不同 |
解决方案
服务器转发
既然跨域不能访问,那么可以把自己的服务器做个跳板,先访问自己服务器,然后再转发到目标资源。
配置跨域支持
配置跨域资源的服务器返回的http头信息:
Access-Control-Allow-Origin: [你的域名] 或者通配成 * 表示允许任何域,跨域访问。
- 图片在CDN的话,比如七牛,公开数据,默认就是支持跨域的
- 自建的静态文件服务器的话,需要自己查询一下,如何配置
http header
header('Access-Control-Allow-Origin: *');
奇淫绝技
先在页面上写一个 <img>
标签,把图片下载下来,下载完成后隐藏 <img>
,然后在 Cocos2d-js
中读取。
<img src="http://172.17.132.113:8081/image_pack.png" onload="load(this)"/><script type="text/javascript">function load(image) {console.log("image load finish");image.style.display = "none";}var res = ["http://172.17.132.113:8081/image_pack.plist", "http://172.17.132.113:8081//image_pack.png"];cc.loader.load(res, function () {cc.spriteFrameCache.addSpriteFrames(res[0], res[1]);that.initScene();});</script>