年末项目组要搞个周年庆活动，需要上一个 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
14
15
16
<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>