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"是服務器有的域名，而不能是"*";