koa开启cors允许跨域，携带cookies

使用koa开发想要开启 cors 非常koa开启cors允许跨域，携带cookies简单，已经有对应的库：@koa/cors。

虽然库的readme没有具体介绍具体的用法，但是我们可以通过阅读测试用例知道可以传什么参数，什么类型。

基本用法

 

const cors = require('@koa/cors')

app.use(cors());

只需要两行，接口就会在返回数据的时候带上Access-Control-Allow-Origin响应头。默认允许所有请求方式跨域，Access-Control-Allow-Origin默认为*。

携带cookies

为了安全考虑，携带cookies的跨域请求只允许Access-Control-Allow-Origin为单一域名，即只支持一个域名在请求的时候携带cookies。且需要带上响应头Access-Control-Allow-Credentials

对 @koa/cors 添加配置origin和credentials：

 

const cors = require('@koa/cors')

app.use(cors({
  origin: 'http://koa.com',    // 前端地址
  credentials: true
}));

同时，前端要发起携带cookies的跨域请求，需要设置XMLHttpRequest的withCredentials为true，如果你是使用axios，只需要在请求配置里加上一句withCredentials: true，请看例子：

 

export const upload = (requestParams) => {
  return axios({
    method: 'post',
    url: 'http://localhost:8000/api/admin/upload',
    data: requestParams,
    withCredentials: true
  })
}

这样前端（http://koa.com）就可以向后端（http://localhost:8000）发送请求了。

多域携带cookies发送请求

如果你的前端地址只有一个，给@koa/cors的origin添加一个域名就能满足需求，如果需要支持跨域的域名有多个呢？
通过观察@koa/cors的单元测试用例，可以发现origin是支持用函数的方式传入的。这样我们就可以维护一个域名数组，判断请求地址是否在域名数组内，就能知道是否要对请求地址提供携带cookies请求支持了。

要想知道发起请求的前端地址，可以使用ctx.request.header.origin。注意ctx.request.header.origin和ctx.request.origin是不同的。ctx.request.origin是接口域名，ctx.request.header.origin是发起请求的页面域名。

作者：般犀
链接：https://www.jianshu.com/p/b7d197bbe63e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。