前端跨域之jsonp及其原理

跨域

跨域一直是前端无法回避的问题，提到跨域就要提一下浏览器的同源策略

• 同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说 Web 是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。它的核心就在于它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时，它们应该只被允许访问来自同一站点的资源，而不是那些来自其它站点可能怀有恶意的资源。
• 同源指的是：协议、域名、端口全都相同，缺一不可

当前页面url	请求的url	是否跨域	原因
http://www.baidu.com	http://www.baidu.com/index.html	否	同源
http://www.baidu.com	https://www.baidu.com/index.html	是	协议不同
http://www.baidu.com	http://www.daibu.com/index.html	是	域名不同
http://www.baidu.com	http://www.baidu.com:8888/index.html	是	端口不同

前端实现跨域方式

• jsonp
• cors
• 反向代理
• websocket
• window.domain
• postMessage
• iframe

json

目前json数据格式是前后端传递数据最常用的数据格式

• JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
• 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。

jsonp

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

• jsonp是一种跨域数据交互协议，是json的一种“使用模式”。
• json是一种轻量级的数据交换格式。

首先我们通过Jquery的方法来实现一遍跨域请求

1. 首先我们通过JQ封装好的ajax方法请求一个接口（该接口需要跨域）。
   
2. 我们查看控制台，发现需要进行跨域，并且ajax打印出了错误信息
   
3. 点击Network，查看该接口返回的数据是什么，发现是通过callback包裹的json数据。
   
4. 我们修改一下jq的ajax配置，通过jsonp方法请求数据，jsonpCallback的值对应着返回数据的callback，这个值是根据接口返回的数据来确定的。
   
5. 刷新浏览器，查看控制台，发现已经正常获取到数据了
   

原理

动态创建script标签，通过script标签src属性不存在跨域问题，设置callback用于接收返回的数据

1. 事先创建好该方法用于接收返回的数据
2. 通过js创建script标签，设置其src属性为该接口

• js
  
• 刷新页面，查看控制台
  

缺点

• 只能进行GET请求
• 类似于脚本注入，容易被XSS，所以不安全