跨域

2017-04-12  本文已影响0人  Komolei
  1. 什么是同源策略
    浏览器为了安全,只允许本域下的接口交互,这个是浏览器设置的,不能更改的。不同源的客户端的脚本(Javascript、ActionScript)在没有明确授权的情况下,不能读写对方的资源。
    简单来说: 就是浏览器允许我们使用在a.html中编写脚本去访问b.html中的数字资源,前提是a.html和b.html是同源的。
    同源是什么,是指协议、域名、端口相同,一个不同就不是同源。则浏览器会阻止你去获取b.html中的数字资源。
    📌update
    同源策略又分为两种:
  1. 什么是跨域?跨域有几种实现形式
    跨域:允许不同域的接口进行交互。
    实现形式:jsonp、cors、降域(document.domain)、html5的PostMessage,window.name+iframe,window.location.hash+iframe,server proxy(服务器代理)
    reference

  2. JSONP 的原理是什么
    前因:
    1、因为ajax去跨域请求文件时,会被浏览器给禁止掉,无权限去访问(同源政策的规定:ajax请求只能发给同源的网址,否则就报错);
    2、但是script标签中的src属性可以访问URL,同时script标签会阻止文档进行渲染,先下载相关的脚本进行执行。
    3、于是,我们就想那我们不是可以使用script标签去请求一个url来链接到,来下载我们需要的数据到我们需要执行页面。
    4、在这个时候,问题又来了,怎么能让后端传来的数据被我们前端快速使用呢,则可以使用JSON格式的数据。
    基本原理:网页通过添加一个<script>元素,向服务器去请求JSON格式的数据;服务器收到请求后,将数据放在一个指定名字的回调函数中传回来。然后网页的脚本对数据进行处理操作。
    具体的步骤:1、新建script标签,2、设置src,3、解析传来的数据

  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的值是否有,有则浏览器处理响应,我们就可以拿到数据,无则不处理响应,也就拿不到数据了。

  4. 根据视频里的讲解演示三种以上跨域的解决方式
    https://github.com/komolei/demo/tree/master/%E8%B7%A8%E5%9F%9F

上一篇下一篇

猜你喜欢

热点阅读