一. 跨域和同源策略
- 为什么会跨域?因为不同源。
- 什么是"源(origin)"直接看一张图
很明显看到三部分:
- http:// 协议
- localhost 域名
- 8080 端口
所以可以总结为协议、域名、端口如果有任意一项不相同则视为跨域
二. 什么是JSONP?
JSONP(JSON with Padding) 是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。摘自【百度百科】
三. JSON和JSONP有什么什么区别?
JSON虽然和JSONP仅有一个字母的差别,但他们完全不是一回事;JSON是一种交换格式,而JSONP是一种非官方的数据交互协议
四. JSONP的背景
- 受同源策略的影响,ajax请求的文件如果存在跨域就无权限访问
- 不过我们发现凡是有src的标签都可以跨域访问,例如
- iframe
- script
- img
- 恰巧JSON可以用字符数据格式描述复杂的数据,而且JSON被JS原生支持。
- 于是JSONP的核心是动态添加script标签来调用服务器提供的js脚本
- 而客户端对JSON文件调用成功后,就可以按照自己的需求进行处理了。
- 所以JSONP仅仅只是一种非官方协议,而不是数据格式
- 尽管强大的JQuery把JSONP加到了dataType的选项中,也不能说明JSONP就是一种数据格式。(下面会有详细介绍)
五. JSONP应用
下面请求的api采用的是菜鸟教程当中的。
首先看一下前端ajax请求会如何
- 前端代码在localhost域下,访问域https://www.runoob.com
<script src="./jquery.js"></script>
<script type="text/javascript">
window.onload = function