1. 程式人生 > >Cocos Creator 動態載入遠端圖片資源

Cocos Creator 動態載入遠端圖片資源

這個問題折騰了我一個下午,很難受,想通過客戶端載入遠端伺服器中的使用者頭像圖片。

var url = "http://localhost:8080/pic/10001.png";//圖片路徑
var container = this.user_photo.getComponent(cc.Sprite);//圖片呈現位置
this.loadImg(container,url);

//動態載入圖片的方法
loadImg: function(container,url){
	cc.loader.load(url, function (err, texture) {
		var sprite  = new cc.SpriteFrame(texture);
		container.spriteFrame = sprite;
	});
} ,

到這裡還沒有結束,獲取圖片資源的過程中,瀏覽器又丟擲了“已攔截跨源請求:同源策略禁止讀取位於http…的遠端資源。(原因:CORS頭缺少‘Access-Control-Allow-Origin’)。

由於測試時圖片放到了tomcat的web伺服器中,這時需要對tomcat進行配置。

2、在tomcat的web.xml中新增CorsFilter過濾器

<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
</filter>
<filter-mapping>
	<filter-name>CorsFilter</filter-name>
	<url-pattern>/*</url-pattern>
</filter-mapping>

3、重啟Tomcat