跨域
跨域一直是前端无法回避的问题,提到跨域就要提一下浏览器的同源策略
- 同源策略(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的方法来实现一遍跨域请求
- 首先我们通过JQ封装好的ajax方法请求一个接口(该接口需要跨域)。
- 我们查看控制台,发现需要进行跨域,并且ajax打印出了错误信息
- 点击Network,查看该接口返回的数据是什么,发现是通过callback包裹的json数据。
- 我们修改一下jq的ajax配置,通过jsonp方法请求数据,jsonpCallback的值对应着返回数据的callback,这个值是根据接口返回的数据来确定的。
- 刷新浏览器,查看控制台,发现已经正常获取到数据了
原理
动态创建script标签,通过script标签src属性不存在跨域问题,设置callback用于接收返回的数据
1. 事先创建好该方法用于接收返回的数据
2. 通过js创建script标签,设置其src属性为该接口
- js
- 刷新页面,查看控制台
缺点
- 只能进行GET请求
- 类似于脚本注入,容易被XSS,所以不安全