跨域
- 什么是同源策略
浏览器为了安全,只允许本域下的接口交互,这个是浏览器设置的,不能更改的。不同源的客户端的脚本(Javascript、ActionScript)在没有明确授权的情况下,不能读写对方的资源。
简单来说: 就是浏览器允许我们使用在a.html中编写脚本去访问b.html中的数字资源,前提是a.html和b.html是同源的。
同源是什么,是指协议、域名、端口相同,一个不同就不是同源。则浏览器会阻止你去获取b.html中的数字资源。
📌update
同源策略又分为两种:
- DOM 同源策略:禁止对不同源的页面进行DOM操作,主要是用于iframe跨域情况。不同域名的iframe是相互限制访问的
- XmlHttpRequest同源策略:禁止使用XHR对象对不同源的服务器发起http请求。
-
什么是跨域?跨域有几种实现形式
跨域:允许不同域的接口进行交互。
实现形式:jsonp、cors、降域(document.domain)、html5的PostMessage,window.name+iframe,window.location.hash+iframe,server proxy(服务器代理)
reference -
JSONP 的原理是什么
前因:
1、因为ajax去跨域请求文件时,会被浏览器给禁止掉,无权限去访问(同源政策的规定:ajax请求只能发给同源的网址,否则就报错);
2、但是script标签中的src属性可以访问URL,同时script标签会阻止文档进行渲染,先下载相关的脚本进行执行。
3、于是,我们就想那我们不是可以使用script标签去请求一个url来链接到,来下载我们需要的数据到我们需要执行页面。
4、在这个时候,问题又来了,怎么能让后端传来的数据被我们前端快速使用呢,则可以使用JSON格式的数据。
基本原理:网页通过添加一个<script>元素,向服务器去请求JSON格式的数据;服务器收到请求后,将数据放在一个指定名字的回调函数中传回来。然后网页的脚本对数据进行处理操作。
具体的步骤:1、新建script标签,2、设置src,3、解析传来的数据 -
CORS是什么
CORS:Cross-Origin Resource Sharing,跨域资源共享。其定义一种跨域访问的机制,让ajax实现跨域访问。其允许一个域上的网络应用向另一个域提交ajax请求。是浏览器允许ajax可以进行跨域请求资源的一种方式,是一个W3C标准。ie需要10以上,别的浏览器都支持。
1、浏览器发出XMLHttpRequest请求,不过在请求之前添加了一个标头origin,来表明请求是从哪里发出来的。通常表现:origin:当前网页的url
2、而服务器接收到请求后,会判断是否接受请求,是就会返回结果,同时在结果中添加响应头:Access-Control-Allow-Origin。
3、当浏览器接受到服务器的响应之后,开始判断服务器发过来的结果中的响应头中的origin的值是否有,有则浏览器处理响应,我们就可以拿到数据,无则不处理响应,也就拿不到数据了。 -
根据视频里的讲解演示三种以上跨域的解决方式
https://github.com/komolei/demo/tree/master/%E8%B7%A8%E5%9F%9F