前端跨域解决方案（1）：什么是跨域？
1 URL
URL（Uniform Resource Locator）是互联网上的一种资源的简洁标识。它是一种特定格式的字符串，可以指向互联网上的任何资源。当我们在浏览器中输入一个网址，它的结构其实暗含着多层信息。以 http://username:password@www.example.com:80/path/to/file.html?key1=value1&key2=value2#section 为例，其各部分功能如下：
1.1 协议（Protocol）
如图中 http 的部分，定义数据传输的格式、加密方式、错误处理机制等，确保客户端和服务器能正确通信，常见的协议有：
-
http：Hypertext Transfer Protocol，超文本传输协议，不加密，明文传输，安全性较低（默认端口80）
-
https：HTTP Secure，安全超文本传输协议，加密传输（默认端口443），用于安全场景（如支付、登录等）
-
ftp：File Transfer Protocol，文件传输协议，用于文件服务器
-
file：用于访问本地文件系统的文件
1.2 认证信息（Credentials）
如图中 user:pass@ 的部分，用于需要身份验证的服务（如私有 FTP 服务器），浏览器通常自动隐藏该部分。
1.3 域名（Host Name）
如图中 site.com 的部分，这部分称为域名或主机名，它定义了我们想要访问的服务器的地址。这可以是一个IP地址（如 http://192.168.1.1）或者一个注册的域名（如 www.baidu.com）。
1.4 端口号（Port）
如图中 80 的部分，它定义了我们要访问服务器上的哪个服务。如果未指定，那么默认端口是协议的标准端口（例如，对于 HTTP 是 80，HTTPS 是 443，FTP 是 21）。
1.5 路径（Path）
如图中 /pa/th 的部分，它定义了服务器上资源的具体位置。
1.6 查询参数（Query Parameters）
如图中 ?q=val 的部分，用于向服务器传递参数，以 ? 开头，通过 key=value 的格式传递，多个参数用 & 分隔。
1.7 锚点（Hash）
如图中 #hash 的部分，以 # 开头，用于定位网页内的具体位置（如 #section1 会让浏览器滚动到页面中 id="section1" 的元素）。
2 什么是跨域？
"跨域"是指浏览器为了安全性，设置的同源策略限制。同源策略（Same-Origin Policy） 是浏览器的核心安全机制，它规定：只有协议、域名、端口完全相同的资源才属于同一源（Same Origin），否则视为跨域（Cross-Origin），跨域请求会被浏览器默认阻止。那为什么需要跨域限制呢？举个例子：
若没有同源策略，恶意网站 malicious.com 可通过 JS 脚本执行以下操作：
-
在页面中嵌入
http://bank.com的 iframe（银行网站）； -
通过脚本读取 iframe 中的 Cookie（含用户登录凭证）；
-
将 Cookie 发送到恶意服务器，实现身份伪造。
因此，浏览器默认禁止跨域请求，以下情况都会触发跨域：
-
协议不同：http://a.com 访问 https://a.com
-
域名不同：http://a.com 访问 http://b.com
-
端口不同：http://a.com:8080 访问 http://a.com:9090
| 场景 | 协议 | 域名 | 端口 | 是否同源 | 说明 |
|---|---|---|---|---|---|
| 场景 1 | http | a.com | 80 | 是 | 完全相同 |
| 场景 2 | https | a.com | 80 | 否 | 协议不同（http → https） |
| 场景 3 | http | b.com | 80 | 否 | 域名不同（a.com → b.com） |
| 场景 4 | http | a.com | 8080 | 否 | 端口不同（80 → 8080） |
3 跨域常见场景
在现代前端开发中，跨域问题几乎无处不在，以下是三大典型场景：
3.1 前后端分离项目的端口差异
-
场景描述：
前端项目运行在http://localhost:3000（Vue/React 开发服务器），后端 API 部署在http://localhost:4000（Node/Java 服务器），端口不同导致跨域。 -
请求示例：
前端通过fetch('http://localhost:4000/api/users')调用接口，浏览器报错：
Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at http://localhost:4000/api/users.3.2 调用第三方 API 的域名差异
-
场景描述：
前端页面需要请求第三方服务（如百度搜索建议、天气接口），域名不同触发跨域。 -
案例：百度搜索自动补全
前端请求 URL：https://www.baidu.com/sugrec?wd=a&cb=callback-
域名：
www.baidu.com与前端域名（如your-site.com）不同，触发跨域。 -
解决方案：使用 JSONP 或 CORS（需百度服务器配合）。
-
3.3 iframe 嵌套跨域页面的 DOM 操作限制
-
场景描述：
在a.com的页面中嵌入b.com的 iframe，试图通过 JS 操作 iframe 中的 DOM 元素。 -
代码示例：
<!-- a.com 的页面 -->
<iframe src="http://b.com" id="myIframe"></iframe>
<script>const iframe = document.getElementById('myIframe');// 以下操作会报错（跨域限制）console.log(iframe.contentWindow.document.body.innerHTML);
</script>- 错误提示：
Uncaught DOMException: Blocked a frame with origin "http://b.com"
from accessing a cross-origin frame.同源策略看似给开发增加了复杂度，但本质上是为了保护用户数据安全。理解跨域的核心在于掌握 “同源” 的定义（协议 + 域名 + 端口），以及浏览器的安全机制。理解跨域的本质后，我们才能更好地选择解决方案。
下一章将介绍第一个跨域方案 JSONP，敬请期待！