跨域访问到底有啥？

最新推荐文章于 2024-03-17 13:54:44 发布

落魄三无青年

最新推荐文章于 2024-03-17 13:54:44 发布

阅读量184

点赞数

分类专栏：前端学习文章标签：网络协议

本文链接：https://blog.csdn.net/weixin_45858192/article/details/109712579

版权

前端学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文详细介绍了跨域的概念，包括完全跨域和跨子域，并解释了域名的组成。同源策略作为浏览器的安全措施，限制了跨域访问以保护用户数据，但同时也带来了一些不便。文章列举了如链接、脚本和图片等元素的跨域特性，并讨论了常见的跨域解决方案。此外，还探讨了同源策略下Cookie、DOM和AJAX请求的限制。

摘要由CSDN通过智能技术生成

文章目录

跨域是什么

当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时，资源会发起一个跨域HTTP请求。

出于安全原因，浏览器限制从脚本内发起的跨域HTTP请求。例如XMLHttpRequsest和FetchHTTP资源。

常见跨域分为以下两种：

完全跨域：就是指一个顶级域名方向另一个顶级域名。
跨子域：相同顶级域名下的两个子域域名相互通信。

域名是什么

访问的URL地址：网络协议+域名(IP地址)+端口号+资源路径

同源：网络协议相同，域名相同以及端口号相同
不同源：
1. 域名不相同：完全跨域
2. 域名相同，端口号不同：跨子域

互联网默认原则：同源策略(不允许跨域访问)

同源策略

1955年，同源政策由Netscape公司引入浏览器。目前，所有浏览器都实行这个政策。同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。随着互联网的发展。“同源政策”越来越严格。目前，如果非同源，共有三种行为受到限制：

Cookie，LocalStorage和IndexDB无法读取
DOM无法获取
AJAX请求不能发送

虽然这些限制是必要的，但是有时很不方便，合理的用途也受到影响。

所谓”同源“指的是”三个相同“：协议相同，域名相同以及端口相同。

常见跨域

HTML页面中一些允许指定路径的元素具有跨域特性：

<link>元素
<script>元素
<img>元素
<iframe>元素

具有href和src属性

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css" rel="stylesheet">
  <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593926353578&di=a79220c8542cfe4ce8be557a645ad036&imgtype=0&src=http%3A%2F%2Fwww.whjzw.net%2FFileUpImages%2Fnews%2F201504%2F201504161237669130736326206694460510766028.jpg">