唯品秀前端博客
当前位置: 前端开发 > Node+Koa > koa2-cors设置允许指定单个域名、多个域名、所有域名跨域

koa2-cors设置允许指定单个域名、多个域名、所有域名跨域

2019-09-02 分类:Node+Koa 作者:管理员 阅读(743)

前端请求接口难免遇到跨域问题,让人非常讨厌,如果在后端配置下可跨域,那对前端来说轻松多了,其实koa2配置跨域远比前端简单,下面来看一个前端请求接口跨域的错误提示截图:

允许所有域名跨域访问

1
2
const cors = require('koa2-cors');// CORS是一个W3C标准,全称是"跨域资源共享"
app.use(cors()); //全部允许跨域

你没有看错,就这么简单,在你koa项目入口文件中引入一个中间件koa2-cors,然后执行下它的cors()方法就完了,但考虑到安全性问题,我们上线后并不希望所有人可以去跨域访问接口,那么如何做?

指定单个域名跨域

1
2
3
4
5
6
7
8
9
10
11
12
app.use(
    cors({
        origin: function(ctx) { //设置允许来自指定域名请求
            return 'http://localhost:8080'; //只允许http://localhost:8080这个域名的请求
        },
        maxAge: 5, //指定本次预检请求的有效期,单位为秒。
        credentials: true, //是否允许发送Cookie
        allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], //设置所允许的HTTP请求方法
        allowHeaders: ['Content-Type', 'Authorization', 'Accept'], //设置服务器支持的所有头信息字段
        exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'] //设置获取其他自定义字段
    })
);

设置多个域名可跨域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
app.use(
    cors({
        origin: function(ctx) { //设置允许来自指定域名请求
            const whiteList = ['http://weipxiu.com','http://localhost:8081']; //可跨域白名单
            let url = ctx.header.referer.substr(0,ctx.header.referer.length - 1);
            if(whiteList.includes(url)){
                return url //注意,这里域名末尾不能带/,否则不成功,所以在之前我把/通过substr干掉了
            }
            return 'http://localhost::3000' //默认允许本地请求3000端口可跨域
        },
        maxAge: 5, //指定本次预检请求的有效期,单位为秒。
        credentials: true, //是否允许发送Cookie
        allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], //设置所允许的HTTP请求方法
        allowHeaders: ['Content-Type', 'Authorization', 'Accept'], //设置服务器支持的所有头信息字段
        exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'] //设置获取其他自定义字段
    })
);

小结

总体来说还是比前端去弄代理要简单、高效,如果大家项目用上了node中间层,完全也可以这么来搞一波。更多设置可以参考

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(2) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
2

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - koa2-cors设置允许指定单个域名、多个域名、所有域名跨域

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与,主题源码 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 243 篇
  • 草稿数目: 0 篇
  • 分类数目: 15 个
  • 独立页面: 6 个
  • 评论总数: 905 条
  • 链接总数: 14 个
  • 标签总数: 433 个
  • 建站时间: 1070 天
  • 注册用户: 3845 人
  • 访问总量: 8704661 次
  • 最近更新: 2019年11月14日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线