一：跨域请求
=> 出发了同源策略的请求, 请求的时候
=> 发送方地址和接收方地址, 端口号 传输协议 域名 任意一个不一样
二：常见的解决跨域的三种方案
1. jsonp
2. cors
3. 代理
三：原生 JS 解决
1. script 标签的 src 属性来进行跨域
=> 后端返回的是一个字符串, 是一段可执行的 JS 代码
=> 一般后端返回的的都是 'xxx(后端给的数据)'
=> 前端准备好一个函数, 通过参数的形式吧函数名传递给后端
2. cors
=> 有后端开启跨域资源共享
=> 告诉浏览器, 允许这个域名请求我的数据
=> 前端直接发送 ajax 请求
3. 代理
=> 使用 nginx 服务器, 进行代理的配置
=> 前端发送请求的时候, 请求代理标识符
=> 会由 nginx 服务器帮我们转发请求到数据服务器
四：jQuery 解决跨域
1. jsonp
=> jQuery 把动态创建 script 标签
=> 动态把 script 标签插入到页面
=> 使用完毕在删除
=> 这个事情封装起来了
=> 这个函数叫做 $.ajax()
【注】 $.ajax() 方法发送一个 jsonp 请求
=> 必须把 dataType 属性写成 jsonp
=> 他就会发送一个 jsonp 的请求
=> jQuery 发送 jsonp 请求默认是不缓存
-> cache 默认是 false
=> 还有两个专属于 jsonp 请求的配置项
-> jsonp: 配置传递函数名的时候的 key
-> jsonpcallback: 配置一个自己准备好的函数名
2. cors
=> 只要后台开启了跨域资源共享
=> 我们直接请求
3. 代理
=> 我们还是照常配置代理
=> 依旧使用 $.ajax() 或者 $.get() 或者 $.post() 方法发送请求
=> 只是 url 位置写成代理标识符就可以了
$.ajax({ url: 'http://127.0.0.1:80/nz/day33/server/jsonp.php', dataType: 'jsonp', jsonp: 'cb', // 传递参数的时候, 我的 cb 这一项是表示我的准备好的函数名 jsonpCallback: 'fn' }).then(res => { console.log(res) })
function fn(res) { console.log('我被调用了') console.log(res) }