浅谈Koa2框架利用CORS完成跨域ajax请求
实现跨域ajax请求的方式有很多，其中一个是利用CORS，而这个方法关键是在服务器端进行配置。
本文仅对能够完成正常跨域ajax响应的，最基本的配置进行说明（深层次的配置我也不会）。
CORS将请求分为简单请求和非简单请求，可以简单的认为，简单请求就是没有加上额外请求头部的get和post请求，并且如果是post请求，请求格式不能是application/json（因为我对这一块理解不深如果错误希望能有人指出错误并提出修改意见）。而其余的，put、post请求，Content-Type为application/json的请求，以及带有自定义的请求头部的请求，就为非简单请求。
简单请求的配置十分简单，如果只是完成响应就达到目的的话，仅需配置响应头部的Access-Control-Allow-Origin即可。
如果我们在http://localhost:3000 域名下想要访问 http://127.0.0.1:3001 域名。可以做如下配置：
app.use(async (ctx, next) => {
ctx.set('Access-Control-Allow-Origin', 'http://localhost:3000');
await next();
});
然后用ajax发起一个简单请求，例如post请求，就可以轻松的得到服务器正确响应了。
实验代码如下：
$.ajax({
type: 'post',
url: 'http://127.0.0.1:3001/async-post'
}).done(data => {
console.log(data);
})
服务器端代码：
router.post('/async-post',async ctx => {
ctx.body = {
code: "1",
msg: "succ"
}
});
然后就能得到正确的响应信息了。
这时候如果看一下请求和响应的头部信息，会发现请求头部多了个origin（还有一个referer为发出请求的url地址），而响应头部多了个Access-Control-Allow-Origin。
现在可以发送简单请求了，但是要想发送非简单请求还是需要其他的配置。
当第一次发出非简单请求的时候，实际上会发出两个请求，第一次发出的是preflight request，这个请求的请求方法是OPTIONS，这个请求是否通过决定了这一个种类的非简单请求是否能成功得到响应。
为了能在服务器匹配到这个OPTIONS类型的请求，因此需要自己做一个中间件来进行匹配，并给出响应使得这个预检能够通过。
app.use(async (ctx, next) => {
if (ctx.method === 'OPTIONS') {
ctx.body = '';
}
await next();
});
这样OPTIONS请求就能够通过了。
如果检查一下preflight request的请求头部，会发现多了两个请求头。
Access-Control-Request-Method: PUT Origin: http://localhost:3000
要通过这两个头部信息与服务器进行协商，看是否符合服务器应答条件。
很容易理解，既然请求头多了两个信息，响应头自然也应该有两个信息相对应，这两个信息如下：
Access-Control-Allow-Origin: http://localhost:3000 Access-Control-Allow-Methods: PUT,DELETE,POST,GET
第一条信息和origin相同因此通过。第二条信息对应Access-Controll-Request-Method，如果在请求的方式包含在服务器允许的响应方式之中，因此这条也通过。两个约束条件都满足了，所以可以成功的发起请求。
至此为止，相当于仅仅完成了预检，还没发送真正的请求呢。
真正的请求当然也成功获得了响应，并且响应头如下（省略不重要部分）
Access-Control-Allow-Origin: http://localhost:3000 Access-Control-Allow-Methods: PUT,DELETE,POST,GET
请求头如下：
Origin: http://localhost:3000
这就很显而易见了，响应头部信息是我们在服务器设定的，因此是这样。
而客户端因为刚才已经预检过了，所以不需要再发Access-Control-Request-Method这个请求头了。
这个例子的代码如下：
$.ajax({
type: 'put',
url: 'http://127.0.0.1:3001/put'
}).done(data => {
console.log(data);
});
服务器代码：
app.use(async (ctx, next) => {
ctx.set('Access-Control-Allow-Origin', 'http://localhost:3000');
ctx.set('Access-Control-Allow-Methods', 'PUT,DELETE,POST,GET');
await next();
});
至此我们完成了能够正确进行跨域ajax响应的基本配置，还有一些可以进一步配置的东西。
比如，到目前为止，每一次非简单请求都会实际上发出两次请求，一次预检一次真正请求，这就比较损失性能了。为了能不发预检请求，可以对如下响应头进行配置。
Access-Control-Max-Age: 86400
这个响应头的意义在于，设置一个相对时间，在该非简单请求在服务器端通过检验的那一刻起，当流逝的时间的毫秒数不足Access-Control-Max-Age时，就不需要再进行预检，可以直接发送一次请求。
当然，简单请求时没有预检的，因此这条代码对简单请求没有意义。
目前代码如下：
app.use(async (ctx, next) => {
ctx.set('Access-Control-Allow-Origin', 'http://localhost:3000');
ctx.set('Access-Control-Allow-Methods', 'PUT,DELETE,POST,GET');
ctx.set('Access-Control-Max-Age', 3600 * 24);
await next();
});
到现在为止，可以对跨域ajax请求进行响应了，但是该域下的cookie不会被携带在请求头中。如果想要带着cookie到服务器，并且允许服务器对cookie进一步设置，还需要进行进一步的配置。
为了便于后续的检测，我们预先在http://127.0.0.1:3001这个域名下设置两个cookie。注意不要错误把cookie设置成中文（刚才我就设置成了中文，结果报错，半天没找到出错原因）
然后我们要做两步，第一步设置响应头Access-Control-Allow-Credentials为true，然后在客户端设置xhr对象的withCredentials属性为true。
客户端代码如下：
$.ajax({
type: 'put',
url: 'http://127.0.0.1:3001/put',
data: {
name: '黄天浩',
age: 20
},
xhrFields: {
withCredentials: true
}
}).done(data => {
console.log(data);
});
服务端如下：
app.use(async (ctx, next) => {
ctx.set('Access-Control-Allow-Origin', 'http://localhost:3000');
ctx.set('Access-Control-Allow-Methods', 'PUT,DELETE,POST,GET');
ctx.set('Access-Control-Allow-Credentials', true);
await next();
});
这时就可以带着cookie到服务器了，并且服务器也可以对cookie进行改动。但是cookie仍是http://127.0.0.1:3001域名下的cookie，无论怎么操作都在该域名下，无法访问其他域名下的cookie。
现在为止CORS的基本功能已经都提到过了。
一开始我不知道怎么给Access-Control-Allow-Origin，后来经人提醒，发现可以写一个白名单数组，然后每次接到请求时判断origin是否在白名单数组中，然后动态的设置Access-Control-Allow-Origin，代码如下：
app.use(async (ctx, next) => {
if (ctx.request.header.origin !== ctx.origin && whiteList.includes(ctx.request.header.origin)) {
ctx.set('Access-Control-Allow-Origin', ctx.request.header.origin);
ctx.set('Access-Control-Allow-Methods', 'PUT,DELETE,POST,GET');
ctx.set('Access-Control-Allow-Credentials', true);
ctx.set('Access-Control-Max-Age', 3600 * 24);
}
await next();
});
这样就可以不用*通配符也可匹配多个origin了。
注意：ctx.origin与ctx.request.header.origin不同，ctx.origin是本服务器的域名，ctx.request.header.origin是发送请求的请求头部的origin，二者不要混淆。
最后，我们再稍微调整一下自定义的中间件的结构，防止每次请求都返回Access-Control-Allow-Methods以及Access-Control-Max-Age，这两个响应头其实是没有必要每次都返回的，只是第一次有预检的时候返回就可以了。
调整后顺序如下：
app.use(async (ctx, next) => {
if (ctx.request.header.origin !== ctx.origin && whiteList.includes(ctx.request.header.origin)) {
ctx.set('Access-Control-Allow-Origin', ctx.request.header.origin);
ctx.set('Access-Control-Allow-Credentials', true);
}
await next();
});
app.use(async (ctx, next) => {
if (ctx.method === 'OPTIONS') {
ctx.set('Access-Control-Allow-Methods', 'PUT,DELETE,POST,GET');
ctx.set('Access-Control-Max-Age', 3600 * 24);
ctx.body = '';
}
await next();
});
这样就减少了多余的响应头。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了node实现定时发送邮件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
Node.js用c++语言编写而成的，是一个基于chrome V8引擎的javascript运行环境。这篇文章主要介绍了详解node.js中的npm和webpack配置,需要的朋友可以参考下2018-01-01
Node.js可以用很少代码简单地实现一个Web服务，并且它有一个非常活跃的社区，通过Node出色的包管理机制（NPM）可以非常容易获得各种扩展支持。 对简单的应用场景Node.js实现REST是一个非常合适的选择。 本文介绍如何用Node.js实现REST服务。2017-08-08
Node.js是基于Chrome V8引擎的JavaScript的运行时(运行环境-宿主环境),下面这篇文章主要给大家介绍了关于node.js中fs\path\http模块的使用方法,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了adm-zip-0.4.13-中文文档,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-05-05
本篇文章主要介绍了详解express与koa中间件模式对比，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
本篇文章主要介绍了node.js文件上传重命名以及移动位置的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
express是一个开源的node.js项目框架，下面这篇文章主要给大家介绍了关于node.js的Express服务器基本使用的相关资料，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧2019-01-01
webpack在前端工程领域起到了中流砥柱的作用,理解它的内部实现机制会对你的工程建设提供很大的帮助(不论是定制功能还是优化打包),下面这篇文章主要给大家介绍了关于webpack创建项目并打包的详细流程,需要的朋友可以参考下2023-03-03
这篇文章主要给大家介绍了关于使用nodejs写接口的详细步骤,在Node.js中接口可以采用多种形式,包括函数接口、对象接口和事件接口等,需要的朋友可以参考下2023-10-10
最新评论