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

最新推荐文章于 2024-06-15 03:51:35 发布

智学无忧-老曹

最新推荐文章于 2024-06-15 03:51:35 发布

阅读量6k

点赞数 4

分类专栏： Web前端文章标签：同源策略 Javascript跨域请求 JSONP postMessage web前端面试指导

本文链接：https://blog.csdn.net/lxcao/article/details/52947291

版权

Web前端专栏收录该内容

86 篇文章 48 订阅

订阅专栏

题目点评

主要考察对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

<script>
    $.ajax({
        url:"http://localhost:3000/users/userlist",
        type:"get",
        dataType:"jsonp",
        success:function(e){
            console.log(e);
        }
    });
</script>

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

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨域请求</title> 
</head>
<body>
    <iframe src="http://localhost:3000/users/reg" id="frm"></iframe>
    <input type="button" value="OK" οnclick="run()">
</body>
</html>
<script>
   function  run(){
        var frm=document.getElementById("frm");
        frm.contentWindow.postMessage("跨域请求信息：智学无忧IT教育","http://localhost:3000");
   }
</script>

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

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

智学无忧-老曹

关注

4
点赞
踩
22

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web前端面试指导(四十六)：你了解跨域请求吗？

题目点评主要考察对web安全是否有接触，关于安全方面的在面试时是经常被问到的。同一个意思可能问法也不同，比如说：“你对跨域了解吗？”“什么是跨域请求了？”其实都是同一个意思，回答思路可以先回答什么是跨域请求，有什么方式可以实现跨域请求基本上就可以了。什么是跨域请求基于JavaScript的安全，JavaScript同源策略要求一个网站不能调用其它网站的js对象。构成跨域的条件就是
复制链接

扫一扫