简介

CORS(跨域资源共享),是由于浏览器的通源策略(Same Origin Policy),限制了来自不同源的'document'或脚本,以便保证浏览器安全。

当使用ajax跨域请求时,浏览器提示:XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin。

因此,解决CORS关键在于设置后台服务器接收并允许来自不同源的请求。

服务器配置

express添加CORS许可

app.use(function(req, res, next){
    //设置可访问的域名 req.headers.orgin为nodejs下获取访问的域名地址
    res.header("Access-Control-Allow-Origin", req.headers.origin);
    //设置可访问方法名
    res.header('Access-Control-Allow-Methods', req.headers['Access-Control-Allow-Methods']);
    //设置可访问的头
    res.header('Access-Control-Allow-Headers', req.headers['access-control-request-headers']);
    //设置cookie时长
    res.header("Access-Control-Max-Age","1728000");
    //允许凭证,解决session跨域丢失问题
    res.header('Access-Control-Allow-Credentials', 'true');
    next();
});

前台配置

js ajax请求

$.ajax({
    url: 'xxx',//提交地址
    method: 'xxx',//方式
    data: 'phone=xxx&password=xxx,//数据
    xhrFields: {
        withCredentials: true//设置允许凭证
    },
    success: function(data){
        console.log(data);
    }
})

angularjs $http

1.配置angularjs

app.config(function($httpProvider) {
    //允许跨域请求
    $httpProvider.defaults.useXDomain = true;
    //删除用于识别ajax调用的XMLHttpRequests头,防止拦截CORS
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
});

2.$http请求

$http({
    url: "xxx",  //请求地址
    method: "xxx",//方式
    data: {phone:"xxx",password:"xxx"},//数据
    withCredentials: true,//是否允许凭证,与ajax的略有不通,请注意
    }).success(function(data){
        console.log(data);
    })
});

总结

CORS在很多场景下都是必须解决的问题,尤其是RESTful API。此外,在处理浏览器同源策略时候,要注意Access-Control-Allow-Origin的接收范围,尽量使用白名单的方式来准确允许不同源访问,设置*可能会导致XSS或者CSRF等网站攻击漏洞。

happy joining!