1、同源
如果两个页面的协议
,域名
和端口
都相同,则两个页面具有相同的源.
同源策略(英文全称 Same origin policy) 是浏览器提供的一个安全功能.
MDN 官方给定的概念:同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
2、跨域
同源指的是两个 URL的协议、域名、端口一致,反之,则是跨域.出现跨域的根本原因: 浏览器的同源策略不允许非同源的 URL之间进行资源的交互。
浏览器对跨域的拦截
3、如何实现跨域数据请求
现如今,实现跨域数据请求,最主要的两种解决方案,分别是JSONP 和CORS。
JSONP:出现的早,兼容性好(兼容低版本E)。是前端程序员为了解决跨域问题,被迫想出来的一种临时解决方案。缺点是只支持 GET 请求,不支持 POST请求。
CORS:出现的较晚,它是W3C标准,属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求缺点是不兼容某些低版本的浏览器。
4、JSONP
JSONPUSON with Padding)是JSON的一种“使用模式”
可用于解决主流浏览器的跨域数据访问的问题。
实现原理:
由于浏览器同源策略
的限制,网页中无法通过 Ajax 请求非同源的接口数据
。但是<script> 标签
不受浏览器同源策略的影响,可以通过 src 属性,请求非同源的js 脚本。
因此,JSONP 的实现原理,就是通过 <scrip> 标签
的 src 属性,请求跨域的数据接口,并通过函数调用
的形式接收跨域接口响应回来的数据。
$.ajax({
type: 'GET',
url: 'http://ajax.frontend.itheima.net:3006/api/jsonp',
data:{
name:'zs',
age:20,
},
success: function (res) {
console.log(res);
}
});