同源策略和跨域
同源(同源地址)
同源地址指的是两个页面地址的 协议 域名 端口 完全一样,这两个地址就是同源的,或者称为同源地址。
- 我们发现,在现代网站中(京东)一个公司可能具有很多的域名,也都不是同源地址,如果在公司内部都不能进行数据请求,是很不方便的。
URL网址的基本概念
- URL概念:统一资源定位符 (Uniform Resource Locator)
- 俗称网址,用来标识某个资源在网络中的唯一位置。
- 组成部分:
- 示例网址:https://detail.tmall.com/item.htmid=555428842095
- 通信协议: https://
- 域名(服务器地址): detail.tmall.com
- 资源(文件)的具体位置: /item.htm?id=555428842095
同源策略
同源策略(英文全称 Same origin policy)是浏览器提供的一个安全功能。
同源策略不允许和非同源的网站之间发送ajax请求。
- 发送跨域请求时,请求发送是成功的,响应也是成功的,只不过浏览器将响应的信息拦截了,开发者无法对响应信息进行操作。
- 对开发者操作的影响,无法对非同源的地址发送ajax请求(不能跨域)。
跨域
跨域指的是非同源网站之间发送ajax请求。
- 实际开发中,实现跨域数据请求,最主要的两种解决方案,分别是 JSONP 和 CORS。
- JSONP ,兼容性好,但是只支持GET请求。
- CORS ,兼容性不太好,但是支持GET、POST,并且是标准中提供的方式。
跨域方式-JSONP
JSONP:出现的早,兼容性好(兼容低版本IE)。是前端程序员为了解决跨域问题,被迫想出来的一种临时解决方案。缺点是只支持 GET 请求,不支持 POST 请求。
- JSONP (JSON with Padding) 是 JSON 的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。
- 由于浏览器同源策略的限制,网页中无法通过 Ajax 请求非同源的接口数据。
- 但是
<script>
标签不受浏览器同源策略的影响,可以通过 src 属性,请求非同源的 js 脚本。
JSONP 的实现原理
:
-
通过
<script>
标签的 src 属性,请求跨域的数据接口,并通过函数调用的形式,接收跨域接口响应回来的数据。 -
同源策略不限制script标签对非同源地址进行请求,可以借助script标签进行JSONP实现。
JSONP 实现步骤
:
- 准备一个处理函数handle()。
- 通过script标签的src属性,进行接口的请求。
- 请求时传入请求参数,callback 用来传递本地处理函数的函数名,其他参数随便写。
- 当响应结束后,步骤1设置的处理函数会自动调用,
- 可以在处理函数中对响应数据进行后续处理。
// 使用JSONP进行请求处理:
<script>
function handle(res) {
console.log(res);
}
</script>
<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=handle&name=jack"></script>
说明
:
- JSONP和JSON没有本质关联。
- JSONP与ajax没有任何关联。
- JSONP是使用script标签的src属性进行请求发送。
- ajax是通过浏览器提供的XMLHttpRequest对象发送请求。
jQuery发送JSONP请求的方式
jQuery 中的 JSONP,也是通过
<script>
标签的 src 属性实现跨域数据访问的,只不过,jQuery 采用的是动态创建和移除<script>
标签的方式,来发起 JSONP 数据请求。jQuery使用的是
$.ajax()
方法进行JSONP操作。
- 在发起 JSONP 请求的时候,动态向
<header>
中 append追加 一个<script>
标签; - 在 JSONP 请求成功以后,动态从
<header>
中移除刚才 append 进去的<script>
标签;
实现
:
- 设置dataType属性为’jsonp’。
$.ajax({
type: 'GET',
url: 'http://ajax.frontend.itheima.net:3006/api/jsonp',
data: {
name: 'jack',
age: 18
},
// 下面的两个属性作为了解即可,通常不会使用
//jsonp: 'xyz', // 将默认的请求参数名callback设置为其他名称xyz
//jsonpCallback: 'abc', // 将处理函数名称设置为指定名称abc
dataType: 'jsonp', // 设置dataType属性为'jsonp',jQuery就会使用JSONP的方式进行请求发送
success: function (res) {
console.log(res);
}
});
说明
:
- jQuery会将使用过的用于发送jsonp请求的script标签移除,打开页面也看不到。
- 可以从浏览器的network看到请求的类型为 script 。
跨域方式-CORS
CORS:出现的较晚,它是 W3C 标准,属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器。