var http = require('http');
    
http.createServer(function (request, response) {
     // do things here
}).listen(8888);
    
console.log('Server running at: 8888');

var http = require('http');
var url = require('url');
var util = require('util');
http.createServer(function(req, res){
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end(util.inspect(url.parse(req.url, true)));
}).listen(3000);

Url {
  protocol: null,
  slashes: null,
  auth: null,
  host: null,
  port: null,
  hostname: null,
  hash: null,
  search: '?url=http://abc.com/image.png',
  query: { url: 'http://abc.com/image.png' },
  pathname: '/api',
  path: '/api?url=http://abc.com/image.png',
  href: '/api?url=http://abc.com/image.png' }

    var options = {
      uri: imgUrl, // 这个 uri 为空时，会认为该字段不存在，报异常
      headers: {
         'Referer': referrer // 解决部分防盗链选项
      }
    };
    request(options).pipe(res);

项目地址

完整代码

    'use strict';
    var router = require('express').Router();
    var http = require('http');
    var url = require('url');
    var util = require('util');
    var fs = require('fs');
    var callfile = require('child_process');
    var request = require('request');
    
    router.get('/', function(req, res, next) {
        var imgUrl = url.parse(req.url, true).query.url;
        console.log(url.parse(req.url,true).query); 
    
        console.log('get a request for ' + imgUrl);
        if (imgUrl == null || imgUrl == "" || imgUrl == undefined) {
            console.log('end');
            res.end();
            return;
        }
    
        var parsedUrl = url.parse(imgUrl);
        // 这里暂时使用图片服务器主机名做Referer
        var referrer = parsedUrl.protocol + '//' + parsedUrl.host; 
        console.log('referrer ' + referrer);
    
        var options = {
          uri: imgUrl,
          headers: {
             'Referer': referrer
          }
        };
    
        function callback(error, response, body) {
          if (!error && response.statusCode == 200) {
            console.log("type " + response.headers['content-type']);
          }
          res.end(response.body);
        }
    
        // request(options, callback);
        request(options)
            .on('error', function(err) {
                console.log(err)
            })
            .pipe(res);
    });
    
    module.exports = router;

2.5 优化

这部分主要是防盗链部分的优化。

单就 Referer 来说，使用空值和主机名都只能满足部分需求。

一个优化方式是组合，当一种方式不能突破即采用另一种方式。
这种方式的有点在于扩大了适用面积，并且方法对任何场景比较通用。

一个优化方式是接口请求参数带源引用连接。
这种方式对很多人来说不太通用，因为很多场景下并不清楚源引用连接在哪。
但是对我的插件来说非常适用，插件本身保留了源引用。因此可以很好的绕过防盗链限制。

参照：数据存储入门教程 · JavaScript

实现过程基本照抄这个教程的代码。后台账号系统包括对账号的重复检测、密码加密、session等都已经实现。

我们要做的，就是调用前端的这几个关键方法，实现简单的注册、登陆、退出:

  // LeanCloud - 注册
  // https://leancloud.cn/docs/leanstorage_guide-js.html#注册
  var user = new AV.User();
  user.setUsername(username);
  user.setPassword(password);
  user.setEmail(email);
  user.signUp().then(function (loginedUser) {
    // 注册成功
  }, (function (error) {
      alert(JSON.stringify(error));
  }));


  // LeanCloud - 登录
  // https://leancloud.cn/docs/leanstorage_guide-js.html#用户名和密码登录
  AV.User.logIn(username, password).then(function (loginedUser) {
    // 登录成功
  }, function (error) {
    alert(JSON.stringify(error));
  });


  // LeanCloud - 当前用户信息
  // https://leancloud.cn/docs/leanstorage_guide-js.html#当前用户
  var currentUser = AV.User.current();


  // 退出登陆
  AV.User.logOut();

3.2 存储服务

使用账号系统为每个用户添加身份信息后，存储部分就只需要把数据 + 用户身份信息一同上传或下载就可以了。

照样只贴关键方法

// 初始化类(在数据库中表现为数据表`ImageRepo`)和实例(数据库中表现为一条数据)
this.ImageRepo = AV.Object.extend('ImageRepo');
var repo = new this.ImageRepo();
// 填充数据
repo.put('username', 'xxx');
// 上传数据
repo.save().then(function (repo) {
    }, function (error) {
    });

// 下载数据
// 初始化对'ImageRepo'表的查询
var query = new AV.Query('ImageRepo');
// 查询条件为 username字段等于'xxx'
query.equalTo('username', 'xxx');
// 查询
query.find().then(function(results) {
    // 遍历results
    // 在页面添加解决防盗链问题后的图片
}, function(error) {
});

3.3 使用LeanEngine做反防盗链中转接口

要实现的效果是:
1. 我有一个防盗链图片连接abc.com/xxx.png。
2. 我的接口url是http://codeli.leanapp.cn/image?url=xxx。
3. 访问http://codeli.leanapp.cn/image?url=abc.com/xxx.png可访问原图，不受防盗链措施限制。

主要原理很简单，后台处理图片请求时更改header中的referer字段，将结果作为response返回。

关于这部分的实现，欢迎阅读我的另一篇文章，就不再赘述：
服务器作防盗链图片中转，nodejs 上手项目简明教程

关于LeanEngin的使用，文档如下，使用方法非常简单。
云引擎快速入门

云引擎支持NodeJS Python PHP JAVA
只需要下载云引擎命令行工具lean，然后输入几行命令就可以建立一个你熟悉的web框架。
然后，使用你熟悉的语言编写反防盗链实现就行了。

3.4 Chrome 插件实现

有了 3.1~3.3 的实现，这部分就是简单的插件部署和业务逻辑了。

Chrome 插件结构如图：

主要业务：
1. 在popup窗口中添加注册 登陆 退出 等业务。
2. 打开popup 窗口时从云端获取指定账号下保存的图片信息，并展示。若未登陆，则从浏览器localStorage获取并展示。
3. background script 中添加右键菜单项: 当目标是图片时，显示Keep image in browser。
4. 点击Keep image in browser, 执行保存业务逻辑: 若登陆了，保存到云端。若未登录，保存到浏览器localStorage。

具体实现见我的github项目: KeepImageInBrowser
插件Web Store地址： Favorite Image

4. 最后，对去后端化的看法

前段时间在知乎上看到了一个问题,我也顺便说下自己的看法。

web后端会不会变得越来越不需要?

像bmob和leancloud这类后台云服务的流行有一段日子了，使用这些服务使一些web、app的开发周期大大缩减。这对于小团队和初创公司尤为方便。

但这并不意味着不再需要自己开发后台。不是因为他们提供的服务不够全面(相反，我倒认为这类服务将向着全面、便捷、快速发展)，而是因为很多公司和产品，为了保持服务的质量和稳定，突出自己产品的特性，需要自己定制自己的后台，有针对性的去优化某些模块。
云服务作为大众服务平台难以为每个产品做定制。

类似于游戏引擎，如今各个平台都不缺乏优秀的游戏引擎。可是仍有公司和团队耗费大量的成本自研游戏引擎，就是希望能配合自己的游戏系统，完美地展现自己的游戏。

一样的，后台云服务和自定制的后台，是相交但永远不会重合的关系。 他们彼此之间相互影响，共同进步。