axios携带cookie配置详解(axios+koa)

最新推荐文章于 2024-08-25 03:41:39 发布

霜如明月

最新推荐文章于 2024-08-25 03:41:39 发布

阅读量2.9w

点赞数 7

分类专栏：前端文章标签： koa axios

本文链接：https://blog.csdn.net/q3254421/article/details/86476415

版权

本文介绍了在axios中如何配置携带cookie，以及在Koa后端进行跨域响应头设置。讲解了withCredentials的作用，并提醒在设置Access-Control-Allow-Origin时的安全注意事项。此外，还探讨了跨域POST请求中的OPTIONS预检请求及其性能影响，提出了Access-Control-Max-Age的使用来减少预检请求。最后，作者分享了前端学习资源。

摘要由CSDN通过智能技术生成

话不多说，一个字，干！

前端配置如下：

axios.defaults.withCredentials = true; //配置为true
 
axios.post('http://localhost:3000/tpzdz/vote/all', {
 openid: 'oJ0mVw4QrfS603gFa_uAFDADH2Uc',
 date: '2018-11-21'
}).then(function (response) {
 console.log(response)
})

前端配置withCredentials = true 后端的跨域也需要配置

app.use(async (ctx, next) => {
 ctx.set('Access-Control-Allow-Origin', ctx.request.header.origin);
 ctx.set('Access-Control-Allow-Credentials', true);
 await next();
});
 
//防止每次请求都返回Access-Control-Allow-Methods以及Access-Control-Max-Age，
//这两个响应头其实是没有必要每次都返回的，只是第一次有预检的时候返回就可以了。
app.use(async (ctx, next) => {
 if (ctx.method === 'OPTIONS') {
  ctx.set('Access-Control-Allow-Methods', 'PUT,DELETE,POST,GET');
  ctx.set('Access-Control-Max-Age', 3600 * 24);
  ctx.body = '';
 }
 await next();
});