【跨域】什么是跨域(同源策略)、JSONP、CORS

1. 什么是跨域(同源策略)

同源策略:限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制

同源的定义:如果两个页面的协议,端口(如果有指定)和主机都相同,则两个页面具有相同的源。我们也可以把它称为“协议/主机/端口 tuple”,或简单地叫做“tuple". (“tuple” ,“元”,是指一些事物组合在一起形成一个整体,比如(1,2)叫二元,(1,2,3)叫三元)

不同源则跨域,例如http://www.example.com/
在这里插入图片描述
因为浏览器的同源策略导致了跨域。

同源策略限制内容有:

  • Cookie、LocalStorage、IndexedDB 等存储性内容
  • DOM 节点 ,AJAX 请求不能发送

但是有三个标签是允许跨域加载资源:

1.<img src=XXX> 
2.<link href=XXX> 
3.<script src=XXX>
  1. ajax请求时,浏览器要求当前网页和server必须同源(安全)
  2. 同源:协议/域名/端口,三者必须一致
  3. 前端:http://a.com:8080/; server: https://b.com/api/xxx (默认端口80)
    三者都不同源

在这里插入图片描述
在这里插入图片描述
跨域:

  • 所有的跨域,都必须经过server端允许和配合
  • 未经server端允许就实现跨域,说明浏览器有漏洞,危险信号

Jsonp

JSONP

  1. 访问https://immoc.com/,服务端一定返回一个html文件吗?
  2. 服务器可以任意动态拼接数据返回,只要符合html格式要求
  3. 同理与<script src=https://imooc.com/getData.js>

JSONP基本实现原理

  1. script可绕过跨域限制
  2. 服务器可以任意动态拼接数据返回
  3. 所以script就可以获得跨域的数据,只要服务端愿意返回
    在这里插入图片描述
    核心代码演
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值