Cocos2d-js - 解决跨域问题的3种办法

年末项目组要搞个周年庆活动,需要上一个html5的小游戏,由于我有写过 Cocos2d-x,就打算用js版本做个网页小游戏,遇到了经典的ajax跨域的问题。还试出来一些奇淫绝技。

Ajax 跨域

跨域不外乎一下几种情况,是由于安全问题,浏览器不允许js跨域访问。

URL 结果 原因
http://a.b.com/image.png 成功
http://a.b.com/res/a.png 成功
https://a.b.com/res/b.png 失败 协议不同
http://a.b.com:8080/res/b.png 失败 端口不同
http://g.b.com/res/c.png 失败 主机名不同

解决方案

服务器转发

既然跨域不能访问,那么可以把自己的服务器做个跳板,先访问自己服务器,然后再转发到目标资源。

配置跨域支持

配置跨域资源的服务器返回的http头信息:

1
Access-Control-Allow-Origin: [你的域名] 或者通配成 * 表示允许任何域,跨域访问。
  • 图片在CDN的话,比如七牛,公开数据,默认就是支持跨域的
  • 自建的静态文件服务器的话,需要自己查询一下,如何配置http header
php代码
1
header('Access-Control-Allow-Origin: *');

奇淫绝技

先在页面上写一个 <img> 标签,把图片下载下来,下载完成后隐藏 <img> ,然后在 Cocos2d-js 中读取。

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>
Gavin Liu wechat
欢迎您扫一扫上面的二维码,订阅我的微信公众号!