前端跨域有哪些解决方案？
五个经典回答示范
同源策略限制脚本跨域读取响应，解决方案里最标准的是 CORS：服务端返回 Access-Control-Allow-Origin 等头。简单请求直接发，自定义头或 PUT 等会先触发 OPTIONS 预检。开发环境我还用过代理转发：webpack 的 devServer 把请求代理到后端，浏览器看来就是同源。
我会按场景选方案：自有服务用 CORS，配好白名单、允许凭证时不能用通配符；第三方不支持 CORS 的接口走服务端代理；跨窗口通信用 postMessage；老系统兜底 JSONP 但只支持 GET 且有安全风险。线上出过一次预检失败，原因是自定义头没在 Allow-Headers 里，加上后解决。
我会先讲清同源策略保护的是什么：脚本读取响应、Cookie 发送、DOM 访问三条线，不同资源受限不同——img/script 标签天然可跨域加载，这是历史设计。然后讲 CORS 细节：预检的缓存、凭证与通配符互斥、Cookie 的 SameSite 对跨域携带的影响。方案选型上强调安全边界：代理要防 SSRF，白名单要精确到域。
追问『预检请求什么时候不发』：简单请求——GET/POST/HEAD 且头部在安全列表内、Content-Type 限三种；『withCredentials 为什么带不上 Cookie』：服务端要显式 Allow-Credentials 且 Origin 不能是 *，前端 fetch 也要 credentials include；『为什么本地开发不跨域、上线就跨』：代理只在 devServer 生效，生产要在网关配置。
『跨域是浏览器的问题，把后端接口都加上 Access-Control-Allow-Origin 星号就行了，最省事。』——点评：通配符配合凭证场景直接失效，而且是安全反模式——等于对任意站点开放接口。生产环境应白名单精确到域，这个回答暴露没处理过真实跨域配置。
- 打开 模拟练习，选择「前端开发」方向，限时 3 分钟作答本题。
- 对照上方答题框架，逐点检查：哪些要素没覆盖、哪里表达啰嗦。
- 用自己项目的真实经历替换框架中的占位内容，重讲一遍并录音回听。
这类题在真实面试中常被追问细节，
建议进入限时模式练一遍。