跨域源于浏览器的同源策略:协议、域名、端口三者任一不同即为跨源,此时浏览器会限制读取跨源请求的响应(注意请求实际已发出,是响应被拦截)、DOM 访问和存储读取。这是安全机制,防止恶意站点窃取用户数据。

常见解决方案

  • CORS(主流):服务器通过响应头授权。简单请求直接带 Origin 头,服务端返回 Access-Control-Allow-Origin 等;非简单请求(如 PUT、带自定义头)会先发 OPTIONS 预检,通过后浏览器才发真实请求。带 Cookie 需 Allow-Credentials: true 且 Allow-Origin 不能是 *。
  • JSONP:利用 script 标签不受同源限制,只能 GET,有安全风险,已基本淘汰。
  • 代理:开发期用 webpack devServer / Nginx 反向代理把接口转发到同源;生产环境网关转发同理。
  • 其他:postMessage 实现跨窗口通信;WebSocket 不受同源策略限制(服务端自行校验 Origin)。

追问方向:预检请求触发条件与缓存(Access-Control-Max-Age)、CORS 各响应头含义、同源策略放行的标签(img/script/link)及其安全意义。