【koa】静态资源访问，以及条件请求（Conditional Requests）

实现静态资源访问

实现可配置的静态资源中间件存在几个需要注意的问题：

• 首先是 HEAD 和 GET，在 HTTP 请求中，它们具有相同的语义。

• 是否等待下游中间件返回后访问静态资源，这作为一个可选项暴露在参数中。

• 注意不要覆盖已有的处理结果，

  if (ctx.body != null || ctx.status !== 404) return;
  

• 恶意行为，使用 resolve-path 包来避免恶意访问。

  path = resolvePath(config.root, ctx.path.replace(new RegExp('^/'), ''));
  

  正则替换掉绝对路径 /，用于不触发这个包的绝对路径异常。

• 访问的默认文件，作为参数暴露。触发时机是：当前访问的是目录。

• 是否进行 304 响应（Conditional Requests），作为参数暴露。使用 Cache-Control、Last-Modified、If-Modified-Since 机制实现。

  仔细来讲，Cache-Control 头用来向客户端响应，告知是否允许缓存，置为 maxAge=0 或 no-cache。

  然后将 Last-Modified 设置为 stats.mtime.toUTCString()。

  HTTP 协议要求客户端在下次访问时带上 If-Modified-Since，用来想服务端提示上次响应时服务端给的时间。

  在服务端可以这样实现相关逻辑：

  let modifiedTime = ctx.get('If-Modified-Since');
  if (modifiedTime) {
      if (stats.mtime.toUTCString() === modifiedTime) {
          return ctx.status = 304;
      }
  }
  

参考 @koajs/static，@koajs/send。

全部代码：

const fs = require('fs');
const _path = require('path');
const resolvePath = require('resolve-path');

/**
 * opts:
 *  - index = 'index.html' 默认文件
 *  - bubbling = false 是否在冒泡阶段处理
 *  - cache = false 启用客户端缓存，进行 304 响应
 */
module.exports = (root, opts = {}) => {
    let config = {
        root: _path.resolve(root),
        index: opts.index ?? 'index.html',
        bubbling: opts.defer ?? false,
        cache: opts.cache ?? false,
    };

    return async (ctx, next) => {
        if (ctx.method !== 'HEAD' && ctx.method !== 'GET') return;
        if (config.bubbling) {
            // 等待其后中间件处理
            await next();
        }

        // 已有中间件处理则返回 
        if (ctx.body != null || ctx.status !== 404) return;

        // 拼接、检测恶意行为
        let path;
        try {
            path = resolvePath(config.root, ctx.path.replace(new RegExp('^/'), ''));
        } catch (error) {
            return next();
        }

        // 获取 stat
        let stats;
        try {
            stats = fs.statSync(path);
            if (stats.isDirectory()) {
                // 是目录且启用了 index 则加上 index
                if (config.index) {
                    path += `\\${config.index}`
                    stats = fs.statSync(path);
                }
            }
        } catch (error) {
            // 出错，交给下游处理
            return next();
        }

        ctx.set('Content-Length', stats.size);
        if (config.cache) {
            ctx.set('Last-Modified', stats.mtime.toUTCString());
            ctx.set('Cache-Control', 'no-cache');

            let modifiedTime = ctx.get('If-Modified-Since');
            if (modifiedTime) {
                if (stats.mtime.toUTCString() === modifiedTime) {
                    return ctx.status = 304;
                }
            }
        }

        ctx.type = _path.extname(path);
        ctx.body = fs.createReadStream(path);
    }
}

实现 ETag

ETag 是上述 Conditional Requests 的新方案，在 HTTP/1.1 标准中定义。

其本质思想是针对任何（主要是静态资源）响应实体进行 hash，拿到一个数据摘要，作为响应头 ETag。客户端被要求实现：每次请求都带着最新的 ETag。

然后服务端通过比对进行响应。

这个方案的性能会差一点，但是解决了先前的弊端，例如 Last-Modified 精确到秒，对于频繁更改的响应实体无法有效频繁响应。

可以使用 @jshttp/etag ，同时 koa 实现了 etag 的对比逻辑，其上下文对象的 fresh 属性的 getter 实现如下：

/**
   * Check if the request is fresh, aka
   * Last-Modified and/or the ETag
   * still match.
   *
   * @return {Boolean}
   * @api public
   */

get fresh() {
    const method = this.method;
    const s = this.ctx.status;

    // GET or HEAD for weak freshness validation only
    if ('GET' !== method && 'HEAD' !== method) return false;

    // 2xx or 304 as per rfc2616 14.26
    if ((s >= 200 && s < 300) || 304 === s) {
        return fresh(this.header, this.response.header);
    }

    return false;
},

参考 @koajs/conditional-get、@koajs/etag。

全部代码：

module.exports = (opts) => {
    return async (ctx, next) => {
        await next();

        // 2xx statusCode
        if ((ctx.status / 100 | 0) !== 2) return;

        let entity = await require('./util/getEntity')(ctx.body);
        if (entity) {
            ctx.etag = require('etag')(entity, opts);
            if (ctx.fresh) {
                ctx.body = null;
                ctx.status = 304;
            }
        }
    };
};