网络与安全 · 主观题 · 第 37 题
前端与全栈开发面试 · 第 37 题
前端常见的跨域解决方案有哪些?各自的原理和适用场景是什么?
参考答案
1. CORS:服务端返回 Access-Control-Allow-Origin 等响应头,非简单请求会先发 OPTIONS 预检;带 Cookie 时 Allow-Origin 不能为 *,还要加 Allow-Credentials。这是标准方案,首选。
2. 反向代理:开发环境用 Vite / webpack devServer 的 proxy,生产环境用 Nginx 把 /api 转发到后端,让浏览器看到的始终是同源请求,前端无需改代码。
3. 同域部署或 BFF:前端和接口放在同一个域名下,从根本上消除跨域。
4. postMessage:用于不同源的窗口、iframe 之间通信,接收方要校验 event.origin。
5. WebSocket:不受同源策略限制(服务端应校验 Origin 头)。
6. JSONP:利用 script 标签不受同源策略限制,只支持 GET,而且有安全风险,已经过时,只在兼容老系统时使用。
7. 注意:跨域限制是浏览器施加的,服务器之间的请求不存在跨域问题,所以代理方案能够生效。
解析
CORS 和代理是主流方案,答出预检和带凭证的细节加分。