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
就可以得到嵌入的网页内容啦!