美文网首页
9.同源以及跨域(部分转载)

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

作者: solo2016 | 来源:发表于2016-11-28 11:11 被阅读0次

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.很多大型的网站也是采用这种方式

相关文章

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

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

  • 跨域的几种方式

    跨域以及跨域的几种方式 讲解跨域之前我们先来看看什么是同源策略 什么是同源策略 通常来说,浏览器出于安全方面的考虑...

  • 网站跨域解决方法

    关键词 同源策略 什么是跨域 跨域,请求不同源。同源指协议、域名、端口都相同,只要有一样不相同就是跨域了。 同源限...

  • Spring Boot 跨域解决方案

    跨域 前端和后端的跨域问题,主要是由于浏览器同源策略的限制,同源一般指相互请求资源的两个域的协议、域名(主域名以及...

  • 同源策略及跨域访问方案

    同源与跨域 浏览器同源策略 允许跨源访问使用CORS: 是HTTP的一部分 如何解决跨域读取Cookie二级域名不...

  • JSONP、CORS、跨域

    跨域 同源:两个文档同源需满足:协议、域名、端口相同跨域:不同域之间相互请求资源,就算作“跨域“。js进行DOM操...

  • 聊聊“过时的”的JSONP

    一. 跨域和同源策略 为什么会跨域?因为不同源。什么是"源(origin)"直接看一张图 很明显看到三部分:htt...

  • 通过script标签实现跨域

    跨域 什么是跨域? 跨域问题是由于javascript语言安全限制中的同源策略造成的。同源策略是由Netscape...

  • H5跨域访问

    跨域访问是源于浏览器的同源策略而引申出来的概念 1、先了解什么是同源策略和跨域访问 同源策略、跨域解决方案 - R...

  • 跨域

    什么是跨域? 说跨域之前先要谈几个概念。跨域问题要从同源策略谈起,那什么是同源策略呢?同源是下面三项都相同,缺一不...

网友评论

      本文标题:9.同源以及跨域(部分转载)

      本文链接:https://www.haomeiwen.com/subject/mqcopttx.html