什么是同源策略？跨域有哪些解决方案？

详细解析#

什么算同源#

以 https://www.example.com 为例：

同源策略限制什么#

• 限制：读取跨源请求的响应（fetch、XHR）；访问跨源窗口或 iframe 的 DOM；读取其他源的 localStorage、IndexedDB 等存储（Cookie 不完全按源隔离，由 Domain、Path 决定能否读取）
• 不限制：资源嵌入，<img>、<script>、<link>、<video> 等都可以加载跨源资源；表单提交、页面跳转也不受限制

跨域请求被拦截，不代表请求没发出去。简单请求通常已经到达服务器并被处理了，是浏览器发现响应里没有允许的 CORS 头，才不把结果交给 JS。所以不能指望同源策略来防御 CSRF（见 XSS 和 CSRF）。

CORS：简单请求和预检请求#

简单请求要同时满足下面几个主要条件，浏览器会直接发送，并在请求头里带上 Origin：

• 方法是 GET、HEAD、POST 之一
• 只使用 CORS 安全列表中的请求头，比如 Accept、Accept-Language、Content-Language、Content-Type；带了 Authorization 或自定义请求头就不算
• Content-Type 只能是 text/plain、multipart/form-data、application/x-www-form-urlencoded 之一

不满足时，浏览器会先发一个 OPTIONS 预检请求，用 Access-Control-Request-Method、Access-Control-Request-Headers 询问服务器是否允许。预检通过才发送真正的请求，不通过就不发。

跨域携带 Cookie#

要让跨域请求带上 Cookie，并且 JS 能读到响应，需要同时满足：

• 前端：fetch 设置 credentials: 'include'，XHR 设置 withCredentials = true
• 后端：返回 Access-Control-Allow-Credentials: true
• 后端：Access-Control-Allow-Origin 必须是具体的源，不能是 *

// Express 中间件：按白名单返回 CORS 响应头
const allowList = ['https://www.example.com', 'http://localhost:5173']

app.use((req, res, next) => {
  const { origin } = req.headers
  // 响应头随请求的 Origin 变化，告诉缓存要按 Origin 区分
  res.vary('Origin')
  if (allowList.includes(origin)) {
    // 要携带 Cookie，就必须返回具体的源，不能用 *
    res.setHeader('Access-Control-Allow-Origin', origin)
    res.setHeader('Access-Control-Allow-Credentials', 'true')
  }
  if (req.method === 'OPTIONS') {
    // 预检请求：声明允许的方法和请求头，预检结果缓存 10 分钟
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE')
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization')
    res.setHeader('Access-Control-Max-Age', '600')
    return res.sendStatus(204)
  }
  next()
})

其他方案#

• 开发环境代理：Vite 的 server.proxy、webpack devServer 的 proxy。浏览器请求的是同源的开发服务器，再由它转发给后端；服务器之间的请求不受同源策略限制
• Nginx 反向代理：生产环境把前端页面和接口放到同一个源下，比如把 /api/ 开头的请求转发给后端服务，从根本上避免跨域（见反向代理和负载均衡）
• postMessage：窗口或 iframe 之间跨源通信，接收方要校验 event.origin（见标签页通信）
• WebSocket：不受同源策略限制，但握手请求会带上 Origin，服务端应该校验。否则任何网站的页面都能连上来，如果靠 Cookie 鉴权，还可能被冒用身份
• JSONP：利用 <script> 可以跨源加载的特点，只支持 GET，而且要无条件信任对方返回的脚本，有安全风险，已经过时

面试官可能追问#

易错点#

• CORS 是浏览器的限制，服务器之间的调用、Postman、curl 都不受影响
• 跨域报错不等于请求没到服务器：简单请求已经被服务器处理了，只是 JS 拿不到响应
• Access-Control-Allow-Origin 不能写多个源，要支持多个源，只能由服务端按白名单动态返回，并加上 Vary: Origin