设置允许跨域的响应头后，为什么还是不能跨域

在 post 请求中，设置了允许跨域的响应头，且考虑了 preflight 预检请求，但为什么还是报不能跨域的错误呢？下面来看看下面的例子，POST 请求中设置了允许跨域、允许预检的响应头

router.post('/corsTest', ctx => {
  // 以及允许跨域了
  ctx.set({
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': '*',
    'Access-Control-Allow-Headers': '*'
  })
  ctx.body = { a: 123 }
})

我们需要深入了解预检请求的过程，预检请求会先发送一个 OPTIONS 的请求去测试服务端是否允许跨域。这个时候我们需要注意，我们也需要处理对应接口的 OPTIONS 请求，上面只处理了接口 URL 的 POST 请求，并没有处理 OPTIONS 请求，可以使用 router.use(url, func) 或者加一个 router.options 请求处理

// options 预检请求时允许
router.options('/corsTest', ctx => {
  ctx.set({
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': '*',
    'Access-Control-Allow-Headers': '*'
  })
  ctx.body = {}
})

// 真实请求
router.post('/corsTest', ctx => {
  ctx.set({
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': '*',
    'Access-Control-Allow-Headers': '*'
  })
  ctx.body = { a: 123 }
})

关于请求预检的更多信息参见：CORS跨域资源共享 - 利用koa来彻底理解web前端跨域问题 - 左小白的技术日常