什么情况下会发生跨域

跨域的本质是浏览器的同源策略 限制，当请求的目标资源与当前页面的协议、域名（主机）、端口三者中任意一个不相同，就会触发跨域。

1. 同源的判定标准

只有当两个资源的协议 、域名（主机名） 、端口 完全一致时，才属于 "同源"，否则即为跨域。例如，当前页面地址为http://www.example.com:8080：

• 同源地址：http://www.example.com:8080/page.html（三者均一致）
• 非同源地址：只要协议、域名、端口任一不同，都算跨域。

2. 常见的跨域场景

（1）协议不同

• 当前页面：http://www.example.com
• 请求目标：https://www.example.com（http 与 https 协议不同）

（2）域名不同

这是最常见的跨域类型，包含多种子场景：

1. 主域名不同
   • 当前页面：http://www.example.com
   • 请求目标：http://www.test.com（example 和 test 为主域名，完全不同）
2. 子域名不同
   • 当前页面：http://www.example.com
   • 请求目标：http://api.example.com（www 和 api 为不同子域名）
3. 域名与 IP 不同
   • 当前页面：http://localhost
   • 请求目标：http://127.0.0.1（localhost和 127.0.0.1 虽指向同一主机，但浏览器判定为不同域名）

（3）端口不同

HTTP 默认端口为 80，HTTPS 默认端口为 443，只要端口号不一致即跨域：

• 当前页面：http://www.example.com:8080
• 请求目标：http://www.example.com:8081（8080 和 8081 端口不同）

（4）特殊的跨域场景

1. 跨域资源嵌入的特殊情况
   • 像<img>、<script>、<link>这类标签加载的资源（如图片、js 文件、css 文件），本身不会触发跨域拦截，但通过这些资源发起的数据交互（如 script 的回调、img 的加载状态传递数据）可能受同源策略限制；
2. iframe 跨域通信
   • 当父页面和 iframe 内页面不同源时，二者无法直接通过 js 进行 DOM 操作或数据通信。

3. 跨域的核心影响

跨域限制仅存在于浏览器端 ，服务器与服务器之间的请求不受同源策略约束；浏览器的跨域拦截主要针对XMLHttpRequest 、Fetch等 AJAX 类请求，目的是保护用户的 Cookie、Session 等敏感信息不被恶意网站窃取。