不受同源策略限制的标签

1、同源策略

是浏览器的一种保护机制，即 协议 + 域名 + 端口 两个URL的这部分都一样就是同源的。
例如：https://blog.csdn.net/csdssdn/article/details/123

URL	是否同源
https://blog.csdn.net/oneTwoThree	同源
https://www.csdn.net/?spm=1001.2014.3001.4476	不同源，域名不同
http://blog.csdn.net/csds	不同源，http 协议不同
https://blog.csdn.net:8899/csds	不同源，端口不同

2、不受同源策略限制的标签

在浏览器中，以下标签不受同源策略影响，可以跨域加载：
2.1 script

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>

2.2 img

<img  src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" alt="图片" />

2.3 link

<!-- 引入样式文件 -->
<link
  rel="stylesheet"
  href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"
/>

2.4 iframe
在项目开发过程中，存在嵌入第三方页面的情况,使用iframe
iframe 嵌页面，src=“目标网页地址”

<iframe src="https://www.baidu.com/index.htm" frameborder="0" width="100%" height="100%"></iframe>

frameborder：是否显示 iframe 周围的边框，1-显示边框（默认），0-不显示边框
width/height: 设置iframe的宽高，
src: 设置源地址url

就可以得到嵌入的网页内容啦！