Web前端面试指导(四十六)：你了解跨域请求吗？

题目点评

主要考察对web安全是否有接触 ，关于安全方面的在面试时是经常被问到的。同一个意思可能问法也不同，比如说：“你对跨域了解吗？”“什么是跨域请求了？”其实都是同一个意思，回答思路可以先回答什么是跨域请求，有什么方式可以实现跨域请求基本上就可以了。

什么是跨域请求

基于JavaScript的安全，JavaScript同源策略要求一个网站不能调用其它网站的js对象。构成跨域的条件就是一个页面的URL协议、域名、端口与另一个页面的URL只要有一个不同就构成了跨域请求。为了辅助大家的理解，看下面的表格就是知道是什么意思了！

URL	说明	是否允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	不允许
http://www.a.com/a.js http://70.32.92.74/b.js	域名和域名对应ip	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名（同上）	不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js http://www.a.com/b.js	不同域名	不允许

特别注意两点：
第一：如果是协议和端口造成的跨域问题“前台”是无能为力的，
第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会根据域名对应的IP地址是否相同来判断。
“URL的首部”可以理解为“协议, 域名 和 端口 必须匹配”。


解决跨域请求的方式

（一）JSONP

情景：网站http://localhost:63342/ 页面要请求http://localhost:3000/users/userlist  页面，userlist页面返回json字符串格，如下图：

端口号为63342网站的一个页面index.html通过ajax请求url http://localhost:3000/users/userlist ，这个明显的出现了跨域请求，因为端口号不一样。请求时发生的错误如下：

解决方式，采用JSONP方式来请求
index.html

Node.js 服务器代码

router.get("/userlist", function (req, res, next) {
    var callback=req.query["callback"];
    var user = {name: 'Mr.Cao', gender: 'male', career: 'IT Education'};
    res.write(callback+"("+ JSON.stringify(user)+")");
    res.end();
});

成功请求的结果

缺点：
1、这种方式无法发送post请求
有点
1.使用比较方便
2.很多大型的网站也是采用这种方式

（二）在服务器端设置同源策略地址

router.get("/userlist", function (req, res, next) { 
    var user = {name: 'Mr.Cao', gender: 'male', career: 'IT Education'};
    res.writeHeader(200,{"Access-Control-Allow-Origin":'http://localhost:63342'});
    res.write(JSON.stringify(user));
    res.end();
});

在响应头上添加Access-Control-Allow-Origin属性，指定同源策略的地址。同源策略默认地址是网页的本身。

缺点
1.目前IE浏览器的老版本还不支持

（三）H5新特性postMessage
发送信息页面  http://localhost:63342/index.html

接收信息页面 http://localhost:3000/message.html

window.addEventListener("message",function(e){
        console.log(e.data);
    },false);