koa——跨域 CORS 问题解决、跨域调试

在使用 koa 开发 nodejs 应用时，碰到跨域问题，即本地进行前端开发时，不能请求已经部署在某个域名下的接口。使用 koa-cors 和 koa2-cors 发现并没有效果。
也许是我用 koa 不多，感觉 koa 不是很好用很完备。比如没发指定当前的基础路径，需要文件结构配合，比如使用 koa-cors 或 koa2-cors 发现并没有解决跨域问题——没有设置上允许跨域的源，只能自己手写一个 cors 解决跨域的问题。

这里写一下 cors 函数的代码

const REG_WHITE_LIST = /^https?:\/\/(?:[0-9a-zA-Z-]+\.)*\.(?:ws|biz|com)(?::\d+)?$/;
// 这里写上想要匹配的域名
module.exports = async function cors (ctx, next) {
    const origin = ctx.get('Origin');
    if (origin && REG_WHITE_LIST.test(origin)) {
        ctx.set('Access-Control-Allow-Origin', origin); // 允许跨域
        ctx.set('Access-Control-Allow-Methods', 'POST,GET,OPTIONS,HEAD,PUT,DELETE'); // 支持的方法
        ctx.set('Access-Control-Allow-Credentials', 'true'); // 允许传入Cookie
        ctx.set('Access-Control-Max-Age', 2592000); // 过期时间一个月
        // 如果有特殊的请求头，直接响应
        if (ctx.get('Access-Control-Request-Headers')) {
            ctx.set('Access-Control-Allow-Headers', ctx.get('Access-Control-Request-Headers'));
        }
        // FIX：浏览器某些情况下没有带Origin头
        ctx.set('Vary', 'Origin');

        // 如果是 OPTIONS 请求，则直接返回
        if (ctx.method === 'OPTIONS') {
            ctx.status = 204;
            return;
        }
    }

    await next();
};
​

将上述 cors 函数直接在 koa 的实例里面使用。就可以跨域了。

const app = new Koa();
app.use(require("./cors.js"));
​

ps：受伤没有前端项目，想试一试自己写的跨域对不对怎么办？
这里给大家放上一段代码，直接在工作台的 console 的使用 XMLHttpRequest。

var httpRequest = new XMLHttpRequest();
httpRequest.open('GET', 'https://xxxx.com/api', true);
httpRequest.withCredentials =true; // 携带cookie信息
httpRequest.send();
​

执行之后，httpRequest.response 即可查看返回的信息。

详细内容看 https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

从上面的代码可以看出，不论是否跨域，服务都会接收到请求，并且能够访问请求的所有信息，而且服务器会去处理该请求，并返回相关信息。