关于koa2处理cors请求的坑-async/await

最新推荐文章于 2022-08-28 12:18:21 发布

原创最新推荐文章于 2022-08-28 12:18:21 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

本文详细记录了解决跨域资源共享（CORS）中预检请求问题的过程，特别是针对JSON内容的POST请求。通过调整koa2中间件的处理方式，确保了正确的响应头设置，最终解决了前端Vue和后端React项目之间的跨域问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

同时开了react后台项目在3000端口，前端vue在8080端口，koa2在9000端口。

处理非json的cors请求时没问题，如一般的GET、formdata。

然后处理一个json内容的post请求发现浏览器报错，说：response没有返回Access-Control-Allow-Origin。

但是我在

router.post("/uploadNews", fileController.uploadNews);

的中间件中已经加了ctx.set('Access-Control-Allow-Origin':'*');

看了下浏览器控制台NetWork中的请求，OPTOIONS预检时既然说没拿到Access-Control-Allow-Origin，可能是最开始的中间件已经驳回了请求，于是试试在一开始的中间件添加对OPTIONS的处理。

async function corsJson(ctx, next) {
  ctx.set("Access-Control-Allow-Origin", "*");
  ctx.set("Content-Type", "application/json;charset=utf-8");
  ctx.set("Access-Control-Allow-Methods", "GET, POST, PUT,OPTIONS");
  ctx.set("Access-Control-Allow-Headers", "content-type");
  if (ctx.request.method === 'OPTIONS') {
    ctx.status = 200   
  } else {
    await next();
  }
}

然后添加到路由处理链中：

router.post("/uploadNews", corsJson, fileController.uploadNews);

随后遇到一个错误，客户端提交后总是拿到404，调试了好阵子，最后发现是corJson中间件的next()忘了加await了。。。

晕死～～

改完就ok。