前端面试：同源策略和跨域

知识点

什么是同源

同源指的是两个URL的协议、域名、端口号都相同，则两个页面具有相同的源。

http://www.test.com/80/index.html中，http:是协议名，//www.test.com/是域名，/80/是端口号

http://www.test.com/80/index.html和http://www.test.com/main.html同源。端口号不显示则默认为80端口，index.html 、main.html为网页名
http://www.test.com/80/index.html和http://www.test.com/80/main.html同源。
http://www.test.com/80/index.html和https://www.test.com/main.html不同源。协议名不一致
http://www.test.com/80/index.html和http://www.user.com/index.html不同源。域名不一致
http://www.test.com/80/index.html和http://www.test.com/7990/main.html不同源。端口号不一致

什么是同源策略

同源策略(Same origin policy)浏览器提供的一种安全策略功能。（目的：隔离潜在的恶意文件，提供安全）

MDN官方给出的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制

其实，这话和没说一样，同样的中文，但是组织起来，却不理解

通俗讲，就是浏览器限制不是同源的网站进行交互，不是同源说明协议名、域名、端口号其中任意一个不一致，同源策略相当于给网页交互上了一层隐形的墙

什么是跨域

两个URL的协议名、域名、端口号其中任意一个不一致，则叫跨域

http://www.test.com/80/index.html和https://www.test.com/main.html跨域。协议名不一致
http://www.test.com/80/index.html和http://www.user.com/index.html跨域。域名不一致
http://www.test.com/80/index.html和http://www.test.com/7990/main.html跨域。端口号不一致

出现跨域的根本原因

浏览器的同源策略不允许非同源的URL之间进行资源的交互

浏览器对跨域请求的拦截

如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传在这里插入图片描述

浏览器允许发起跨域请求
浏览器能接收到服务器响应的数据
但首先会被浏览器的同源策略所拦截，不会直接把数据交给浏览器的ajax请求中，则服务器响应的数据无法被页面获取

就比如皇帝（浏览器A）住在乾清宫发圣旨，皇后（服务器B）接到命令，立马传回去，不过皇帝身份比较高贵，需要通过太监（同源策略）来拦截收到的信息，然后再统一传给皇帝

浏览器如何实现跨域数据请求

两种方式：

JSONP：只支持GET，不支持POST请求

CORS：GET、POST都支持，官方跨域ajax请求的根本解决方案

什么是JSONP

通过<script>标签的src属性请求接口数据，进行函数回调。目的：解决主流浏览器跨域请求数据访问的问题

由于同源策略，浏览器无法接收非同源接口数据；

由于<script>标签不受到浏览器同源策略的影响，因此通过src属性请求接口数据，进行函数回调，就是JSONP的实现原理。

<script>
    function getJsonP(res) {
    console.log('得到了res数据:' + res);
</script>
<script src="./js/getData.js?callback=getJsonP"></script>

jsonp可以将目标代码作为js的形式加载过来

还可以直接利用jquery的ajax请求jsonp

<!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>
    <!-- jquery动态添加jsonp请求 -->
    <button id="btnjsonp">发起jsonp请求</button>
    <script>
        // 入口函数
        $(function () {
            $("btnjsonp").on('click', function () {
                $.ajax({
                    url: "./data/data.json",
                    dataType: "jsonp",
                    jsonpCallback: 'abd',
                    success: function (res) {
                        console.log(res);
                    }
                })
            })
        })
    </script>
</body>
</html>