什么是跨域请求与解决办法

跨域请求（Cross-Origin Request）是前端开发中一个非常重要且常见的问题，它关系到浏览器安全机制、前后端通信策略、接口调用规范。

下面我来详细解释：

🌐 一、什么是“跨域请求”？

✅ 定义：

当浏览器中的网页访问一个与当前网页源（Origin）不同的地址时，就叫“跨域请求”。

同源：协议、域名、端口三者完全一致
跨域：只要有一个不同，就构成跨域

举例：

页面地址	请求地址	是否跨域	原因
`http://example.com`	`http://example.com`	❌ 否	完全相同
`http://example.com`	`https://example.com`	✅ 是	协议不同
`http://example.com`	`http://api.example.com`	✅ 是	子域名不同
`http://example.com:80`	`http://example.com:8080`	✅ 是	端口不同

🧱 二、跨域限制来自哪里？

来自 浏览器的同源策略（Same-Origin Policy）。

该策略限制 JavaScript 脚本只能访问与其网页同源的资源，以防止恶意脚本窃取用户信息（例如 Cookie、LocalStorage）。

⚠️ 注意：跨域问题主要发生在 浏览器发起的请求，如 AJAX、fetch、图片、iframe、脚本标签等。

🔧 三、跨域请求的解决办法

✅ 1. CORS（跨域资源共享，最常用）

服务端通过设置 Access-Control-Allow-Origin 等响应头，允许特定源跨域访问。

示例返回头：

Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true

前端 fetch 示例：

fetch('https://api.example.com/data', {
  credentials: 'include' // 允许发送 cookie
});

✅ 2. JSONP（仅支持 GET 请求，已逐步淘汰）

通过 <script> 标签加载带回调函数的 JSON 数据来实现跨域。
适用于旧系统或无 CORS 支持的 API。

<script src="https://api.example.com/data?callback=handleData"></script>
<script>
  function handleData(data) {
    console.log(data);
  }
</script>

✅ 3. 代理转发（本地同源，后端代理跨域）

前端请求自己的服务器 /api/...，由服务器再请求真实跨域地址，然后返回结果。
开发中常见方案：webpack devServer 或 nginx 代理

// 前端访问
fetch('/api/user')

// nginx 配置反向代理
location /api/ {
  proxy_pass https://target-domain.com/;
}

✅ 4. 使用 iframe + postMessage（页面通信）

父页面与子页面通过 window.postMessage 进行跨域通信。
适合跨域登录授权、支付页面通信等场景。

✅ 5. 使用 DNS CNAME + CDN 回源（避免子域跨域）

前端调用的域名如：api.example.com
实际 CNAME 指向 CDN → CDN 回源统一源站，保持同源

📌 四、面试总结技巧

你可以这样回答：

“跨域是浏览器出于安全限制而阻止前端 JS 访问不同源的资源。最主流的解决方式是 CORS，由服务端设置响应头允许特定源访问。开发中也常使用 代理转发、postMessage、或采用 JSONP 兼容旧系统。”