跨域是前端开发中非常常见的问题，它的出现和浏览器的同源策略直接相关，理解跨域需要先搞清楚同源策略的基本规则。
跨域的核心概念
跨域指的是浏览器限制从一个源加载的文档或脚本，与另一个源的资源进行交互的行为。这里的源由三个部分组成：协议、域名、端口，只有当这三个部分完全一致时，两个地址才属于同源。
浏览器的同源策略是一种安全机制，目的是防止恶意网站窃取用户数据。比如你登录了银行网站，如果没有同源策略，另一个恶意网站就可以直接读取银行网站的 cookie 等敏感信息，带来严重的安全风险。
同源的判断规则
我们可以通过几个例子来判断两个地址是否同源：
| 当前页面地址 | 请求目标地址 | 是否同源 | 原因 |
|---|---|---|---|
| http://www.ipipp.com | http://www.ipipp.com/api/list | 是 | 协议、域名、端口均一致 |
| http://www.ipipp.com | https://www.ipipp.com | 否 | 协议不同 |
| http://www.ipipp.com | http://api.ipipp.com | 否 | 域名不同 |
| http://www.ipipp.com | http://www.ipipp.com:8080 | 否 | 端口不同 | >
常见的跨域触发场景
日常开发中，以下场景很容易触发跨域限制：
- 前后端分离部署：前端项目部署在 http://localhost:3000，后端接口部署在 http://localhost:8080，前端调用后端接口时就会出现跨域问题。
- 调用第三方接口：比如前端直接调用地图服务、支付服务的第三方接口，这些接口的域名和前端项目域名不同，会触发跨域。
- 静态资源跨域访问：页面中通过<img>、<script>标签加载不同域名的资源时，部分场景下也会受到跨域限制，比如使用 canvas 处理跨域图片时会报错。
- iframe 跨域通信：页面中嵌入不同域名的 iframe，父页面和 iframe 之间直接进行 DOM 操作或者数据交互时，会触发跨域限制。
跨域的常见解决思路
虽然同源策略限制了跨域交互，但开发中可以通过一些合法的方式解决跨域问题：
- CORS（跨域资源共享）：后端在响应头中设置允许的源、方法、头部等信息，浏览器识别到合法的 CORS 头后就会允许跨域请求，这是最标准的解决方式。
- 代理转发：前端开发环境下可以通过 webpack 等工具的代理功能，把跨域请求转发到同源的后端接口，避开浏览器的跨域限制。
- JSONP：利用<script>标签不受同源策略限制的特性，通过动态创建 script 标签加载跨域数据，不过只支持 GET 请求，现在使用场景已经比较少。
CORS 简单示例
后端设置 CORS 头部的 Node.js 代码示例：
// Node.js 后端设置 CORS 响应头
const http = require('http');
const server = http.createServer((req, res) => {
// 允许指定的源访问，也可以设置为 * 允许所有源，但生产环境不建议
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
// 允许的请求方法
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
// 允许的请求头
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
res.end(JSON.stringify({ code: 0, data: '请求成功' }));
});
server.listen(8080, () => {
console.log('服务启动在 8080 端口');
});
需要注意的是，跨域是浏览器的限制，和服务器本身无关，服务器之间的请求不存在跨域问题，只有浏览器发起的请求才会受到同源策略的约束。