如何在cocos creator web项目中使用跨域图片_app

概述我们知道，在使用cocos creator做web项目的时候，经常要用到外部图片，举个例子：微信头像。当web项目在浏览器中运行的时候，用普通的http请求微信头像的方法会提示跨域，无法获取到图片。解决跨域的方法也看了很多，全都是需要服务器配合才能完成的 *** 作，我们无法 *** 作微信的服务器，所以只能想其他办法解决。 1：搭建一个可以转发http的服务器要注意：这个服务器要可以被跨域访问，设置一下he

我们知道，在使用cocos creator做web项目的时候，经常要用到外部图片，举个例子：微信头像。当web项目在浏览器中运行的时候，用普通的http请求微信头像的方法会提示跨域，无法获取到图片。

解决跨域的方法也看了很多，全都是需要服务器配合才能完成的 *** 作，我们无法 *** 作微信的服务器，所以只能想其他办法解决。

1：搭建一个可以转发http的服务器

要注意：这个服务器要可以被跨域访问，设置一下header就行，如何设置，自行探索。
过程：
1、客户端请求该转发服务器，并把要获取的资源链接当参数传过去；
2、转发服务器收到请求之后解析一下参数，把资源链接提取出来，直接请求资源链接；
3、资源链接返回的数据给转发服务器；
4、转发服务器把收到的资源数据原封不动返回给客户端。
逻辑过程已经很明白了，具体的实现过程有很多方法，这里就不举例了。

2：获取图片数据并生成图片

客户端Js代码

//这是http转发请求封装的方法httpRequest = function (params) {    cc.log('发送请求',params.url);    var urlStr = 'http://192.168.31.22/httpGet?url=' + params.url;    var methodStr = params.method || 'GET';    var async = false;    if (!!params.async) {        async = true;    }    var xhr = new XMLhttpRequest();    xhr.onreadystatechange = function () {        if (xhr.readyState === 4 && (xhr.status >= 200 && xhr.status < 400)) {            if (!!params.callback) {                cc.log('收到数据',xhr);                params.callback(xhr);            }        }    };    if (!!params.responseType) {        xhr.responseType = params.responseType;    }    xhr.open(methodStr,urlStr,async);    xhr.send();};//base64var Base64 = {            _keyStr: "ABCDEFGHIJKLMnopQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",// public method for enCoding            encode: function encode(input) {                var output = "";                var chr1,chr2,chr3,enc1,enc2,enc3,enc4;                var i = 0;                while (i < input.length) {                    chr1 = input[i++];                    chr2 = input[i++];                    chr3 = input[i++];                    enc1 = chr1 >> 2;                    enc2 = (chr1 & 3) << 4 | chr2 >> 4;                    enc3 = (chr2 & 15) << 2 | chr3 >> 6;                    enc4 = chr3 & 63;                    if (isNaN(chr2)) {                        enc3 = enc4 = 64;                    } else if (isNaN(chr3)) {                        enc4 = 64;                    }                    output = output + Base64._keyStr.charat(enc1) + Base64._keyStr.charat(enc2) + Base64._keyStr.charat(enc3) + Base64._keyStr.charat(enc4);                }                return output;            }        };httpRequest({   url: imgurl,async: true,responseType: 'arraybuffer',callback: function (data) {       //把请求回来的数据解析成图片的过程，图片的使用一定要在onload之后，如果不在onload之后，可能图片数据还没有解析出来，下面的代码就调用了，会报错。       var blob = new Uint8Array(data.response);       var img = new Image();       img.src = "data:image/png;base64," + Base64.encode(blob);       img.onload = function () {           var texture = new cc.Texture2D();           texture.generateMipmaps = false;           texture.initWithElement(img);           texture.handleLoadedTexture();           target.spriteFrame = new cc.SpriteFrame(texture);       }   }.bind(this)});