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

上一篇:ufw-防火墙添加22端口


下一篇:AWS 使用S3为Web站点