一,什么是同源
window.origin 或 location.origin 可以得到当前的源。
源 = 协议 + 域名 +端口号
如果两个url的协议、域名、端口号完全一致,那么这两个url就是同源的。
例如: http://www.baidu.com/ 与 http://www.baidu.com/index.html 同源
https://baidu.com 与 https://www.baidu.com 跨域
完全一致才算同源
二,什么是跨域
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
例如: http://www.baidu.com/ 与 http://www.baidu.com/index.html 同源
https://baidu.com 与 https://www.baidu.com 跨域
三,JSONP 跨域
JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,兼容性好(兼容低版本IE),缺点是只支持get请求,不支持post请求。
核心思想:网页通过添加一个<script>元素,向服务器请求 JSON
数据,服务器收到请求后,将数据放在一个指定名字的回调函数的参数位置传回来。
原生js:
<script src="http://test.com/data.php?callback=dosomething"></script>
// 向服务器test.com发出请求,该请求的查询字符串有一个callback参数,用来指定回调函数的名字
// 处理服务器返回回调函数的数据
<script type="text/javascript">
function dosomething(res){
// 处理获得的数据
console.log(res.data)
}</script>
jquery ajax:
$.ajax({
url: 'http://www.test.com:8080/login',
type: 'get',
dataType: 'jsonp', // 请求方式为jsonp
jsonpCallback: "handleCallback", // 自定义回调函数名
data: {}
});
四,CORS 跨域
CORS 是跨域资源分享(Cross-Origin Resource Sharing)的缩写。它是 W3C 标准,属于跨源 AJAX 请求的根本解决方法。
1、普通跨域请求:只需服务器端设置Access-Control-Allow-Origin
2、带cookie跨域请求:前后端都需要进行设置
根据xhr.withCredentials字段判断是否带有cookie