同源策略
+ **同源策略是浏览器给的一个行为**
+ 当你再发送请求的时候, 会涉及到两个地址
1. 打开当前页面的地址
2. 你要请求的地址
+ 两个地址中的 端口号 域名 传输协议
=> 只要由任意一个不一样, 就是非同源请求
=> 就会触发浏览器的同源策略
=> 不允许你获取这个服务器上的数据
触发了同源策略的请求我们叫做 跨域请求
+ 私人: 请求别人家的服务器
+ 第一:
=> 真实开发环境
=> 页面(html, js, css, 静态资源) 是在一个服务器上
=> 所有的数据, 数据库, 在一个服务上
+ 第二:
=> 真实开发环境
=> 我自己不具备条件, 购买别人家服务器服务
=> 美团: 地图功能
=> 新闻: 买新浪的接口, 腾讯的接口
解决浏览器不允许请求别人家服务器的情况
+ 基于 http 协议
1. jsonp
2. cors
3. 代理
jsonp 跨域
+ 因为浏览器的同源策略, 不允许发送跨域的 ajax 请求
+ 我们使用 jsonp 手法来实现跨域请求
script 标签
+ script 标签可以执行 js 代码
=> script 标签有一个属性叫做 type="text/javascript"
=> 就会把里面的代码当作 js 来解析
=> 当你不写 type 属性的时候, 默认是 text/javascript
+ src 属性
=> src 是引入外部资源的属性
=> 不受同源策略的影响
+ 当上面两个加再一起
=> 只要你引入任何一个内容, 都会被当作 js 代码来解析
jsonp 的核心
+ 利用 script 标签的 src 属性
+ 去向一个非同源的服务器请求数据
+ 只要这个服务器能给我返回一个字符串
+ 我就会把这个字符串当作 js 代码来执行
jsonp 请求数据
+ 要求服务器返回一个 函数名() 这样的字符串
+ 要求提前准备号一个函数
+ 要求前端告诉后端你准备好的函数名是什么
=> 再发送请求的时候, 以参数的形式告诉后端
=> 我准备好的函数名叫做什么
jsonp 常见的面试题
1. jsonp 原理
=> src 不受同源策略影响
=> script 标签会把请求的内容当作 js 代码来执行
2. jsonp 的返回值
=> 字符串, 函数名() 形式的字符串
=> 一段可以执行的 js 代码字符串
3. jsonp 的优缺点
=> 优点
-> 绕开了同源策略, 实现跨域请求
-> 方便, 因为是以 script 标签外部资源的形式请求
=> 缺点
-> 不好做安全防范