9.同源以及跨域(部分转载)

1.同源策略

同源策略是浏览器的一种安全策略,是指协议、域名、端口号完全相同.
同源策略要求一个网站不能调用其他网站的js对象

2.跨域

构成跨域的条件就是一个页面只要协议、域名、端口号中只要有一个与另一个页面不同就构成了跨域请求

同源跨域.png

特别注意两点：

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

解决跨域请求的方案:

jsonP:

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

Paste_Image.png

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

Paste_Image.png

解决方式，采用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();  
}); 

成功请求的结果

Paste_Image.png

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