后端代理解决资源跨域
canvas 跨域问题
如果canvas中所绘制的Image或者资源有跨域，则对canvas中的数据进行操作往往会报错，例如在地图导出或者操作像素时
Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
canvas的CanvasRenderingContext2D属于浏览器中的对象，如果曾经渲染过跨域资源。 浏览器就认定canvas已经被污染（tainted）了。问题很常见，所以可以对canvas所加载的资源，特别是图片设置跨域，
image.crossOrigin="anonymous";
对image对象的crossOrigin属性设置anonymous，那么在image.src= "http://.com/.jpg" 的时候，发送的GET请求，到达对方服务器*.com，如果碰巧对方服务器对这类资源的不限制访问，也就是response header的 Access-Control-Allow-Origin 字段为 "*" ，那么我们的浏览器可成功获取资源。
Access-Control-Allow-Origin 这个response header 很常用，确保了服务器对资源的跨域限制。如果需要限定白名单，就直接把白名单的domain或者ip放到value 中。 关于Ol3的切片跨域问题，公瑾大神在这篇文章中已经说得很清楚了，不再赘述
请求有跨域限制的服务器资源
但如果对方服务器限制跨域访问，那不论咱们的前端代码如何设定，都无法绕开。最好的办法之一就是后端代理，DEMO ，点左边这个链接可以在线体验下。。（切片走的代理，另外随便输入个公交线路数字，也是走后台代理的）
在前端需要请求跨域资源时，给URL加上同域下的后台代理前缀，让这个请求走代理转发一下。。真心是老技术。所以随便写写，不花心思完善了。以Nodejs为例的写了一个后台代理模块，主要内容如下：
var Proxy = function (req, res) {
// proxy the client request.
(function() {
console.log("receive client req : "+ req.query['proxyURI']);
var target = req.query['proxyURI'];
// thisPlace should first check localFile if exists, res localFile directly.. 这边呢，接收到前端的请求，把实际要请求的地址拿到，后台转发。
http.get(target, function(response) {
console.log("Proxy got response: " + response.statusCode);
var resContentType = response.headers["content-type"];
res.setHeader("Content-Type", resContentType);
var buffer = [];
response.on('data', (chunk) => {
buffer.push(chunk);
});
response.on('end', () => {
// Buffer toString. 'ascii'/'base64'
var buff = Buffer.concat(buffer);
for(var k in strategies) {
if (resContentType.indexOf(k) > -1) {
// ready to save buffer to localFile.. 碰到策略中指定的文件类型，在本地缓存下
try {
var ext = resContentType.split("/")[1];
var tmpArr = target.split("/");
var fileName = tmpArr[tmpArr.length-2] + "_" + tmpArr[tmpArr.length-1] + "." + ext;
var finalName = "./Asset/tiles/" + fileName;
fs.exists(finalName, function(exists) {
if (exists) {
// 如果这个文件本地缓存过了，直接发回前端。
res.sendFile(finalName, {
root: __dirname
});
} else {
fs.writeFileSync("./Asset/tiles/" + fileName, buff);
res.sendFile(finalName, {
root: __dirname
});
}
});
return;
} catch (error) {
console.error("proxyImage error.");
res.end("proxyImage error.");
}
}
}
// 非二进制文件类型（JSON，HTML等），直接发回字符串
res.end(buff.toString());
});
}).on('error', function(e) {
console.error("Proxy got error: " + e.message);
});
})()
}
module.exports = Proxy;
我记得openlayer2的时候官方有赠送一个python版本的代理，现在ol3好像没了。所以突然发现这个代理还有：
切片下载的功能！！ \(o)/，后台会随着前端的请求过程，缓存图片等文件。
一起搞项目
这个代理模块拿来改改参数就可以勉强用了。所以需要的弟兄们直接去 Github项目地址 取用即可
DEMO截图
这个项目是最近比较常用的，包括了平日里做的一些小插件和DEMO之类的。比如：
- Openlayer-实现带碰撞检测的标注
- 基于canvas的部分模糊插件, DEMO ，简单封装了个Blurify类，配置可用
- 基于Ol2和Jquery Mobile的移动端APP ，这个比较早期
还有另外一个ThreeJS项目有空也在弄，其实想基于ES6做一些模块化的ThreeJS开发，用于搭建三维游戏场景。之前代码写得比较随意，现在必须模块化，不然没法看。。先来个DEMO瞅瞅，数据量大多等会儿，鼠标右键拖动场景。
希望有人一起搞啊，很有趣的项目。。。
