• 第六章:跨域和JSONP


    第六章:跨域和JSONP

    6.1:同源策略和跨域

    • 同源策略

      1. 什么是同源:如果两个页面的协议域名端口都相同,则两个页面具有相同的源

      2. 什么是同源策略:同源策略(英文全称 Same origin policy)是浏览器提供的一个安全功能

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

        通俗的理解:浏览器规定,A网站的JavaScript不允许和非同源的网站C之间进行资源的交互。

    • 跨域

      1. 什么是跨域:同源指的是两个URL的协议、域名。端口一致,反之,则是跨域

        出现跨域的根本原因:浏览器的同源策略不允许非同源的URL之间进行资源的交互。

      2. 浏览器对跨域请求的拦截
        在这里插入图片描述

        注意:浏览器允许发起跨域请求,但是,跨域请求回来的数据,会被浏览器拦截,无法被页面获取到。

      3. 如何实现跨域数据请求:现如今,实现跨域数据请求,最主要的两种解决方案,分别是JSONPCORS

        • JSONP:出现的早,兼容性好(兼容低版本的IE)。是前端程序员为了解决跨域问题,被迫想出来的一种临时解决方案。缺点是只支持GET请求,不支持POST请求。
        • CORS:出现的较晚,它是W3C标准,属于跨域Ajax请求的根本解决方案。支持GET和POST请求。缺点是不兼容某些低版本的浏览器。

    6.2:JSONP

    • 什么是JSONP

      JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。

    • JSONP的实现原理

      由于浏览器同源策略的限制,网页中无法通过Ajax请求非同源的接口数据。但是