Cocos2d-js 解決跨域問題的3種辦法
阿新 • • 發佈:2019-01-25
最近瑣事太多,近半月抽不出時間寫部落格,最近幾天,莫名感覺從頭到腳都散發出一股頹廢的氣息。與各位碼農兄弟們一起講經論道一直是我最願意做的事,一段時間不做,總感覺憋得慌,下面我為大家帶來的一篇關於跨域問題的解決方法的文章,原文出處: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
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>