跨域解决方案

浏览器的同源策略

浏览器为确保资源安全，而遵循的一种策略。

什么是源？

源 = 协议 + 域名 + 端口号。

示例（同源）：

https://example.com 与 https://example.com/page2

❌ 示例（非同源）：

http://example.com 与 https://example.com（协议不同）
https://example.com 与 https://api.example.com（域名不同）
https://example.com:80 与 https://example.com:443（端口不同）

什么是跨域？

所处源与目标源不一致，就是非同源，又称跨域。

浏览器会对跨域做出哪些限制？

例如：源 A 和源 B 是非同源的，则浏览器会有如下限制：

DOM访问限制：源A的脚本不能读取和操作源B的DOM。

    <body>
        <button onclick="showDOM()">获取页面2的DOM</button>
        <iframe id="framePage" src="http://www.baidu.com"></iframe>
        <script type="text/javascript" >
            function showDOM(){
                const framePage = document.getElementById('framePage')
                console.log(framePage.contentWindow) //可以拿到window
                console.log(framePage.contentWindow.document) //不可以拿到DOM
            }
        </script>
    </body>

Cookie的访问限制：源A不能访问源B的Cookie

    <body>
        <button onclick="showCookie()">获取页面2的Cookie（不会成功的）</button>
        <iframe id="framePage" src="http://www.baidu.com"></iframe>
        <script type="text/javascript" >
            function showCookie(){
                 console.log(document.cookie) //打印的是当前源的cookie
            }
        </script>
    </body>

Ajax相应数据限制：源A可以给源B发请求，但是无法获取源B响应的数据

<body>
        <button onclick="getNews()">获取头条新闻</button>
        <script type="text/javascript" >
            async function getNews(){
                const url = "https://www.toutiao.com/hot-event/hot-board/?origin=toutiao_pc"
                let result = await fetch(url)
                let data = await result.json()
                console.log(data)
            }
        </script>
    </body>