0
点赞
收藏
分享

微信扫一扫

4.跨域与jsonp

googlefrank 2022-05-02 阅读 67

文章目录


一、了解同源策略和跨域

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

3.实现一个简单的JSONP

举报

相关推荐

0 条评论