跨域 (Cross-Origin)
定义
跨域是指当一个域下的文档或脚本试图去请求另一个域下的资源时，由于浏览器的 同源策略 的限制，会发生跨域问题。当协议、域名和端口都相同时，两个 URL 被认为是同源的，否则就是跨域的。
核心特点
- 同源策略限制：浏览器通过同源策略来限制跨域请求，保护用户的数据安全。
- 安全性：防止恶意网站窃取用户数据。
- 灵活性：可以通过一些技术手段来实现跨域访问。
场景
- API 请求：前端应用需要从后端 API 获取数据，但前后端应用可能部署在不同的域名下。
- 静态资源：前端应用需要加载来自 CDN 或其他域名的静态资源，例如图片、CSS 文件、JavaScript 文件等。
- 嵌入内容：前端应用需要嵌入来自其他域名的内容，例如 iframe、广告等。
解决方案
安全风险
- 数据泄露：如果跨域请求没有进行适当的安全控制，可能会导致敏感数据泄露。
- XSS 攻击：如果允许加载来自不受信任的域名的脚本，可能会导致 XSS 攻击。
- CSRF 攻击：如果跨域请求没有进行 CSRF 防护，可能会导致 CSRF 攻击。
优缺点
- 优点： - 允许 Web 应用访问来自不同域名的资源。 - 提高 Web 应用的灵活性。
- 缺点： - 存在安全风险，需要进行适当的安全控制。 - 配置复杂，容易出错。
相关概念
- 同源策略: 简述同源策略的概念和作用。
- CORS: 简述 CORS 的概念和用法。
- JSONP: 简述 JSONP 的概念和用法。
- XSS: 简述 XSS 攻击的概念和原理。
- CSRF: 简述 CSRF 攻击的概念和原理。
案例（可选）
- 使用 CORS 实现跨域 API 请求：展示如何使用 CORS 来实现跨域 API 请求。
- 使用 JSONP 获取跨域数据：展示如何使用 JSONP 来获取跨域数据。
参考资料
- MDN Cross-Origin Resource Sharing (CORS): https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS
- What is Cross-Origin?: https://www.codecademy.com/articles/what-is-cross-origin