跨域与JSONP

1.了解同源策略和跨域

1.1 同源策略

1.什么是同源

如果两个页面的协议域名端口都相同,则两个页面具有相同的源

例如:下表给出了相对于 http://www.test.com/index.html 页面的同源检测:

跨域与JSONP_第1张图片

 2.什么是同源策略

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

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

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

  1. 无法读取非同源网页的 Cooki、LocalStorage 和 lndexedDB
  2. 无法接触非同源网页的 DOM
  3. 无法向非同源地址发送 Ajax 请求

1.2跨域

1 什么是跨域

同源指的是两个URL的协议、域名、端口一致,反之,则是跨域

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

网页:http://www.test.com/index.html

接口:http://www.api.com/userlist

2.浏览器对跨域请求的拦截

跨域与JSONP_第2张图片

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

3.如何实现跨域数据的请求

到如今,实现跨域数据请求,最主要的两个解决方案,分别为 JSONP 和 CORS。

JSONP:出现的早,兼容性好(兼容版本IE)。是前端程序员为了解决问题,被迫想出来的一种 临时解决方案。缺点是 只支持 GET 请求,不支持 POST 请求。

CORS:出现的较晚,它是W3C标准,属于跨域 Ajax 请求的根本解决方案,支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器。

2.JSONP

2.1什么是JSONP

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

2.2 JSONP的实现原理

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

通过

2.4JSONP的缺点

由于JSONP是通过

你可能感兴趣的:(前端)