同源策略
• 同源策略是浏览器的一种安全策略，所谓同源是指域名，协议，端口完全相同
• 在同源策略下，只有同源的地址才可以相互通过 AJAX 的方式请求。
• 同源或者不同源说的是两个地址之间的关系，不同源地址之间请求我们称之为跨域请求
例 www.example.com/detail.html 与以下地址对比:
在同源策略下，浏览器不允许 Ajax 跨域获取服务器数据. 如何解决这个问题呢?
跨域解决方案
JSONP
JSON with Padding，是一种借助于 script 标签发送跨域请求的技巧。
原理就是在客户端借助 script 标签请求服务端的一个地址; 地址返回一段带有某个全局函数调用的 JavaScript 脚本; 在调用函数中，原本需要返回给客户端的数据通过参数传递给这个函数; 这样客户端的函数中就可以通过参数得到原本服务端想要返回的数据.
注意:
- JSONP 只能发送 GET 请求.
- JSONP 用的是 script 标签，与 AJAX 提供的 XMLHttpRequest 没有任何关系
演示:
服务端:
客户端:
响应结果:
控制台结果:
jQuery 中的 jsonp
jQuery基本使用 $.ajax()
jQuery 中使用 JSONP 就是将 dataType 设置为 jsonp
$(".btn").click(function () {
// 发送跨域的 ajax 请求
$.ajax({
url: "https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web",
type: "GET",
dataType: "jsonp",
data: {"wd": "ajax"},
success: function (data) {
console.log(data)
}
})
})
在控制台中可以看到这个接口返回的信息, 这里的callback就是回调函数的参数名称(默认为callback), 后面的值是回调函数的名称, 默认是jQuery自动生成的.
通过jsonp可以更改回调函数的参数名称:
jsonp: "cb", //这条属性可以设置回调函数的参数名称（必须与后台接口的回调函数参数名保持一致）
通过jsonpCallback可以更改回调函数的名称:
jsonpCallback: "abc", //jQ 自动分配的回调函数的名称进行重命名
cors 跨域
Cross Origin Resource Share，跨域资源共享
这种方案无需客户端作出任何变化（客户端不用改代码），只是在被请求的服务端响应的时候添加一个 Access-Control-Allow-Origin 的响应头，表示这个资源是否允许指定域请求。
Access-Control-Allow-Origin 的值：
| 符号 | 意义 |
|---|---|
| * | 表示允许任意源访问，不安全 |
| foo.com | 允许指定的源访问 |
