文章目录
一、了解同源策略和跨域
1.什么是同源?
补充:在域名后面没有写出 冒号 端口号 则默认是80端口号
2.什么是同源策略
3.什么是跨域
== 不是同源就是跨域==
浏览器的同源策略会拦截服务器响应回来的数据:因为这是跨域请求
二、JSONP
1.什么是JSONP
2.JSONP的实现原理
利用script的sc属性不受浏览器同源策略的影响
案例1: 发起跨域的Ajax请求
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/jquery.js"></script>
</head>
<body>
<script>
$.ajax({
method: 'GET',
url: 'http://ajax.frontend.itheima.net:3006/api/jsonp',
data: {
name: 'zs',
age: 20
},
success: function (res) {
console.log(res);
}
})
</script>
</body>
</html>
运行结果:
Access-Control-Alow-Origin :表示发起了跨域请求
跨域原因:协议不同:一个是file协议;另一个是http协议;如图所示: