基于nodejs koa2的解决跨域中间件设计

一、解决浏览器跨域问题的方法有很多种

1) 通过后端设置 http Access-Control-* 相关响应头
2) 通过 Jsonp
3) 通过 nginx 反向代理

关于这三种解决跨域方法的介绍可以看我的另外一篇文章：如何解决前端跨域问题

本文主要讲基于 nodejs koa2 实现第一种跨域方案，并设计成 koa2 中间件

二、跨域中间件实现的功能

1) 支持跨域 cookie
2) 支持指定的跨域 http 请求头，比如 accesstoken 等
2) 对预检结果进行缓存,缓存时间设置为1天（即86400秒）
3) 当http method 为 OPTIONS时，为预检时，此时直接返回空响应体,对应的 http 状态码为 204

三、koa-cors 中间件代码

koa-cors.js

const URL = require('url');
/**
 * 关键点：
 * 1、如果需要支持 cookies,
 *    Access-Control-Allow-Origin 不能设置为 *,
 *    并且 Access-Control-Allow-Credentials 需要设置为 true
 *    (注意前端请求需要设置 withCredentials = true)
 * 2、当 method = OPTIONS 时, 属于预检(复杂请求), 当为预检时, 可以直接返回空响应体, 对应的 http 状态码为 204
 * 3、通过 Access-Control-Max-Age 可以设置预检结果的缓存, 单位(秒)
 * 4、通过 Access-Control-Allow-Headers 设置需要支持的跨域请求头
 * 5、通过 Access-Control-Allow-Methods 设置需要支持的跨域请求方法
 */
module.exports = async function (ctx, next) {
  const origin = URL.parse(ctx.get('origin') || ctx.get('referer') || '');
  if (origin.protocol && origin.host) {
    ctx.set('Access-Control-Allow-Origin', `${origin.protocol}//${origin.host}`);
    ctx.set('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, DELETE, PUT');
    ctx.set('Access-Control-Allow-Headers', 'X-Requested-With, User-Agent, Referer, Content-Type, Cache-Control,accesstoken');
    ctx.set('Access-Control-Max-Age', '86400');
    ctx.set('Access-Control-Allow-Credentials', 'true');
  }
  if (ctx.method !== 'OPTIONS') {
    // 如果请求类型为非预检请求，则进入下一个中间件（包括路由中间件等）
    await next();
  } else {
    // 当为预检时，直接返回204,代表空响应体
    ctx.body = '';
    ctx.status = 204;
  }
};