koa2 设置Access-Control-Allow-Origin 解决前端跨域问题

文章原文：https://www.cnblogs.com/yalong/p/14954672.html

跨域资源共享(CORS) 详解看这里:

https://www.ruanyifeng.com/blog/2016/04/cors.html

koa2 实现对post请求的跨域资源共享，只需加入如下中间件即可：

app.use(async (ctx, next)=> {
  ctx.set('Access-Control-Allow-Origin', '*');
  ctx.set('Access-Control-Allow-Headers', 'Content-Type');
  ctx.set('Access-Control-Allow-Methods', 'POST');
  await next();
});

解析：

1. 如果只有 ctx.set('Access-Control-Allow-Origin', '*'); 是不行的，因为post 请求，请求头会有 Content-Type， 必须在服务端加上处理
2. 同样也得加上请求方式的处理 ctx.set('Access-Control-Allow-Methods', 'POST');

CORS 更多的设置如下：

ctx.set('Access-Control-Allow-Origin', '*'); //允许来自所有域名请求(不携带cookie请求可以用*，如果有携带cookie请求必须指定域名)
// ctx.set("Access-Control-Allow-Origin", "http://localhost:8080"); // 只允许指定域名http://localhost:8080的请求

ctx.set('Access-Control-Allow-Methods', 'OPTIONS, GET, PUT, POST, DELETE'); // 设置所允许的HTTP请求方法

ctx.set('Access-Control-Allow-Headers', 'x-requested-with, accept, origin, content-type'); //字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段.
// 服务器收到请求以后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。

ctx.set('Access-Control-Allow-Credentials', true); // 该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。
// 当设置成允许请求携带cookie时，需要保证"Access-Control-Allow-Origin"是服务器有的域名，而不能是"*";