左小白的技术日常
Github

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

这篇文章发布于 2021/01/12,归类于
标签:
跨域cors请求预检

在 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前端跨域问题 - 左小白的技术日常