一、了解同源策略和跨域

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协议；如图所示：
在这里插入图片描述

文章目录