跨域与JSONP

129 阅读2分钟

1.同源策略与跨域

1.1.同源策略

1.1.1.什么是同源?

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

image.png

1.1.2.什么是同源策略?

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

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

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

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

1.2.跨域

1.2.1.什么是跨域?

同源指的是两个url的协议域名端口都一致,反之,则为跨域。

1.2.2.出现跨域的原因

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

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

image.png

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

1.2.4.如何实现跨域数据请求

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

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

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

2.解决跨域

  1. JSONP解决跨域
  2. jQuery封装的jsonp(getJSON())
  3. cors解决跨域
  4. cors解决跨域 4.(实际开发中用代理服务器解决跨域问题,前面的只面试官喜欢问。JSONP解决跨域和都需要后端人员的配合 )

2.1.JSONP解决跨域

2.1.1什么是JSONP?

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

2.2.2JSONP的实现原理

由于浏览器同源策略的限制,网页中无法通过Ajax请求非同源的接口数据。但<script>标签不受浏览器同源策略的影响,可以通过src属性请求非同源的js脚本。因此,JSONP的实现原理,就是通过<script>标签的src属性请求跨域的数据接口,并通过函数调用的形式,接受跨域接口响应回来的数据。

image.png

2.2.jQuery封装的JSONP

image.png

2.3.cors解决跨域

image.png

image.png