牛客安恒信息前端实习一面整理（跨域 / iframe 通信 / 取消请求 / Vue3）（八）
收录日期：2026-05-06
关键词：前端、跨域、iframe 通信、请求取消、Git、Flex、Vue3、页面缓存
1. 跨域是怎么解决的？有哪些方案？
参考答案
跨域本质是浏览器同源策略对“读响应”的限制，常见解决方案：
- CORS（首选）：服务端设置
Access-Control-Allow-Origin等；带 cookie 需Access-Control-Allow-Credentials: true且不能用*。 - 反向代理：Nginx/网关统一同源（前端请求打到同域，再转发到后端）。
- JSONP：只支持 GET，现代业务基本不推荐。
- postMessage / iframe：用于页面间通信，不是解决 XHR CORS 的通用方案。
2. forEach 和 map 区别？
参考答案
- 返回值：
map返回新数组；forEach返回undefined。 - 语义：
map适合“映射变换”；forEach适合“仅遍历产生副作用”。 - 终止：两者都不能用
break；需要可中断遍历用for...of或some/every。
3. iframe 内嵌页面如何通信？
参考答案
- 同源：可直接
iframe.contentWindow.xxx访问；也可用window.parent。 - 跨域（推荐）：
window.postMessage(message, targetOrigin)+ 监听message事件，并严格校验origin。 - 工程化：定义消息协议（type/payload/requestId）、超时与重试、双向 ACK，避免“收到但没处理”。
4. 切换页面后如何中断上一个页面的请求？
参考答案
- fetch：用
AbortController，在页面卸载/路由切换时controller.abort()。 - axios：新版本可用
AbortController；老版本CancelToken（已逐步被替代）。 - 工程建议：
- 为每个页面/业务域维护统一的 abort 管理器；
- 组件卸载时统一 cancel，避免“已卸载组件 setState”类问题。
5. Git 从提交到冲突再到解决的流程？
参考答案
- 拉取更新（
git pull或fetch+rebase/merge）。 - 出现冲突 → 打开文件手动合并冲突块。
git add标记解决 →git commit（merge）或git rebase --continue（rebase）。- push 前跑一遍 lint/test，避免冲突解决引入回归。
6. flex: 0 拆开分别是什么？
参考答案
flex 是 flex-grow flex-shrink flex-basis 的缩写：
flex: 0等价于flex: 0 1 0%（不同浏览器细节可能略有差异，但核心是 grow=0 不放大）。- 常见：
flex: 1约等于1 1 0%（占满剩余空间）。
7. 如何在组件中设置子组件样式？如何改第三方组件样式？
参考答案
- 组件自身提供 className/props（最佳）：例如
class、style、theme、tokens。 - CSS 作用域问题：
- Vue SFC
scoped下改子组件：用:deep()（或::v-deep）穿透。 - 第三方组件：优先走“主题变量/设计 token”；其次才是覆盖选择器（注意权重与升级风险）。
- Vue SFC
- 避坑：不要全局写过宽的选择器导致污染；尽量限定在容器根节点下。
8. 页面缓存是什么？怎么做？
参考答案
常见“页面缓存”可能指：
- HTTP 缓存：浏览器缓存静态资源（见 Cache-Control/ETag）。
- 前端路由页面缓存：
- Vue：
<KeepAlive>缓存组件实例，适合列表页返回保留滚动与状态。 - React：可用路由缓存方案（状态提升 + store + keep-alive 实现）。
- Vue：
- 数据缓存：Query 缓存（SWR/React Query），配合失效策略（stale-while-revalidate）。
9. 页面切换后返回，如何保留查询条件？
参考答案
- URL：把筛选条件放 querystring（可分享、可刷新恢复）。
- 状态管理：Pinia/Vuex/Redux 存一份（适合复杂对象）。
- sessionStorage：临时保存（tab 级）。
- 组合策略：URL 负责“可复现输入”，store 负责“UI 状态”。
10. 子组件如何暴露方法给父组件调用？
参考答案
- Vue3：
defineExpose({ open, close })+ 父组件ref调用。 - Vue2：父组件
ref调子组件实例方法（注意耦合与可维护性）。 - 更推荐：用事件/props 驱动（声明式），少用命令式调用。
11. Vue3 新增了什么“标签/特性”？（常见回答方向）
参考答案
严格说 Vue3 不是“新增标签”，而是新增能力：
- Composition API（
setup、ref/reactive、组合式逻辑复用）。 - Fragment / Teleport / Suspense（更灵活的渲染与异步组件能力）。
- 响应式升级为 Proxy、更好的 TS 支持。
12. rule 和 skill 的区别？（按 Agent/AI 产品常见语境）
参考答案
- Rule：偏“硬约束/策略”，更确定（白名单、权限、流程门禁、校验与兜底）。
- Skill：偏“可组合能力/工具封装”，通常是 Agent 能调用的一段能力（检索、下单、查库、生成报表），更面向任务执行。
- 工程上：rule 用来保证安全与可控；skill 用来扩展能力与复用。