后端代理解决资源跨域

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之类的。比如：

• Openlayer-实现带碰撞检测的标注
• 基于canvas的部分模糊插件, DEMO ，简单封装了个Blurify类，配置可用
• 基于Ol2和Jquery Mobile的移动端APP ，这个比较早期

还有另外一个ThreeJS项目有空也在弄，其实想基于ES6做一些模块化的ThreeJS开发，用于搭建三维游戏场景。之前代码写得比较随意，现在必须模块化，不然没法看。。先来个DEMO瞅瞅，数据量大多等会儿，鼠标右键拖动场景。