美文网首页
Access-Control-Allow-Origin 跨域设置

Access-Control-Allow-Origin 跨域设置

作者: LnEoi | 来源:发表于2017-03-10 11:12 被阅读29735次

    在HTML5中有一种新的跨域方式,即设置“Access-Control-Allow-Origin”可以指定允许跨域访问的域名。
    Node.js中可以这样写

    app.all('*', function(req, res, next) {
            res.header("Access-Control-Allow-Origin", 'https://www.google.com');
            res.header('Access-Control-Allow-Methods', 'POST, GET');
            res.header('Access-Control-Allow-Headers', 'X-Requested-With');
            res.header('Access-Control-Allow-Headers', 'Content-Type');
        next();
    });
    

    但在实际使用中,可能需要设置多个域名。
    在网上查询资料,有一种写法

    Access-Control-Allow-Origin: https://www.google.com,https://www.baidu.com
    

    改成相应的代码,但是始终提示问题,只允许一个值。

    于是换种方式,查资料发现,许多是先自己判断域名是否是允许的,如果是再设置允许跨域访问。那么代码应该改成如下形式

    app.all('*', function(req, res, next) {
        if( req.headers.origin == 'https://www.google.com' || req.headers.origin == 'https://www.baidu.com' ){
            res.header("Access-Control-Allow-Origin", req.headers.origin);
            res.header('Access-Control-Allow-Methods', 'POST, GET');
            res.header('Access-Control-Allow-Headers', 'X-Requested-With');
            res.header('Access-Control-Allow-Headers', 'Content-Type');
        }
        next();
    });
    

    使用时可以把允许访问的域名写成一个数组,然后JS写一个比较字符串是否在数组内的函数,这样使用就比较方便了。

    其中,Access-Control-Allow-Origin就是我们需要设置的域名,Access-Control-Allow-Methods是允许的请求方式,Access-Control-Allow-Headers跨域允许包含的头。

    兼容性

    相关文章

      网友评论

          本文标题:Access-Control-Allow-Origin 跨域设置

          本文链接:https://www.haomeiwen.com/subject/xnsngttx.html