跨域问题是由浏览器的 同源策略（Same-Origin Policy） 触发的安全限制，当网页尝试通过 JavaScript 访问不同源的资源时，浏览器会拦截响应。以下是跨域发生的常见场景及具体示例：

一、跨域的判定条件

当以下任意一项不同时，即视为跨域：

二、跨域发生的典型场景

1. 前端与后端分离开发

• 场景：前端运行在 http://localhost:3000，后端 API 部署在 http://localhost:8080。
• 结果：浏览器拦截前端发起的 AJAX 请求，报错 CORS policy blocked。
   
• 示例：

  // 前端代码（运行在 3000 端口）
  fetch('http://localhost:8080/api/data') // 跨域请求
    .then(response => response.json());
  

2. 调用第三方 API

• 场景：你的网站 https://your-site.com 直接请求第三方服务（如 https://api.weather.com）。
• 结果：若第三方未配置 CORS 头，浏览器会拦截响应。
• 示例：

  fetch('https://api.weather.com/data') // 第三方域名不同
    .then(response => response.json());
  

3. 子域名不同

• 场景：主站 https://www.example.com 请求子域名的 API https://api.example.com。
• 结果：虽然主域名相同，但子域名不同，仍会触发跨域。
• 示例：

  fetch('https://api.example.com/user') // 子域名不同
    .then(response => response.json());
  

4. 协议不同（HTTP vs HTTPS）

• 场景：网页部署在 HTTPS 协议下，但请求 HTTP 协议的接口。
• 结果：现代浏览器会强制拦截混合协议请求。
• 示例：

  // 网页运行在 https://your-site.com
  fetch('http://your-site.com/api/data') // 协议不同
    .then(response => response.json());
  

5. 本地文件访问（file:// 协议）

• 场景：通过本地 HTML 文件（file:///index.html）直接请求远程 API。
• 结果：浏览器默认禁止 file:// 协议发起的跨域请求。
• 示例：

  // 本地文件 index.html
  fetch('https://api.example.com/data') // 协议不同（file:// vs https://）
    .then(response => response.json());
  

6. Web 应用与 CDN 资源

• 场景：从 CDN 加载字体、图片或脚本时，若 CDN 未设置 CORS 头，可能触发跨域问题。
• 示例：

  <!-- 网页运行在 https://your-site.com -->
  <script src="https://cdn.other-domain.com/library.js"></script>
  

7. 跨域 Cookie 和凭证

• 场景：前端携带 Cookie 或认证头（如 Authorization）请求不同源的接口。
• 结果：若服务器未设置 Access-Control-Allow-Credentials: true 且未明确允许来源，请求会被拦截。
• 示例：

  fetch('https://api.example.com/data', {
    credentials: 'include' // 携带 Cookie
  });
  

三、特殊请求类型（触发预检请求）

以下操作会先发送 OPTIONS 预检请求，需服务器明确支持：

1. 自定义请求头（如 X-Custom-Header）
2. 非简单方法（如 PUT、DELETE、PATCH）
3. Content-Type 非简单值（如 application/json）

四、如何避免跨域问题？

1. 服务器配置 CORS 头（如 Access-Control-Allow-Origin）。
2. 代理服务器转发请求（开发环境中常用）。
3. JSONP（仅限 GET 请求，已逐渐被淘汰）。
4. WebSocket（不受同源策略限制）。

五、总结

跨域问题本质是浏览器为保护用户安全而设计的机制，常见于前后端分离、多服务协作等场景。正确配置 CORS 响应头或使用代理是主流的解决方案。