1. 程式人生 > >Cocos2d-js 解決跨域問題的3種辦法

Cocos2d-js 解決跨域問題的3種辦法

        最近瑣事太多,近半月抽不出時間寫部落格,最近幾天,莫名感覺從頭到腳都散發出一股頹廢的氣息。與各位碼農兄弟們一起講經論道一直是我最願意做的事,一段時間不做,總感覺憋得慌,下面我為大家帶來的一篇關於跨域問題的解決方法的文章,原文出處:http://gavinliu.cn/,該文章是筆者於201 6/12/14發表,到現在為止,讀過的人還不到200,人數確實有點少。我個人對跨域問題理解的深度不夠,不知其中有無疏漏之處,歡迎各位看官不吝賜教。

Ajax跨域

跨域不外乎以下幾種情況:

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 中讀取。

<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>