简介
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){
//设置可访问的域名 in为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.mon['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！
