跨域会受到哪些限制

例如有两个源：【源A】和【源B】，它们是【非同源】的，那么会有如下限制：

限制访问

源A』的脚本『源B』的 DOM。

<!-- <iframe id="framePage" src="./demo.html"></iframe> -->
<iframe id="framePage" src="https://www.baidu.com"></iframe>

<script type="text/javascript" >
  function showDOM(){
    const framePage = document.getElementById('framePage')
    console.log(framePage.contentWindow.document) //同源的可以获取，非同源的无法获取
  }
</script>

限制访问

『源A』『源B』的 cookie。

<iframe id="baidu" src="http://www.baidu.com" width="500" height="300"></iframe>

<script type="text/javascript" >
  // 访问的是当前源的cookie，并不是baidu的cookie
  console.log(document.cookie)
</script>

限制

『源A』可以给『源B』发请求，但是『源B』响应的数据。

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)

备注

在上述限制中，浏览器对Ajax获取数据的限制是影响最大的一个，且实际开发中经常遇到。