前端/移动开发面试题更新 2026-08-05

请解释浏览器同源策略下跨域的概念,并结合 Vue 项目的实际开发经验,谈谈你通常采用哪些方案来处理跨域请求,以及这些方案各自的适用场景与注意事项。

前端/移动开发技术原理方案权衡问题排查Vue

考察说明

考查对浏览器同源策略的理解以及在实际项目中处理跨域问题的能力和经验。

回答思路

  1. 【回答框架 1】同源策略是浏览器的一种安全机制,要求协议、域名、端口完全一致才能进行资源访问。跨域即指请求的资源与当前页面不同源,浏览器会拦截响应,但请求不一定发出。
  2. 【回答框架 2】常见的跨域方案有 JSONP、CORS、代理(如 webpack-dev-server 的 proxy)、Nginx 反向代理等。JSONP 只支持 GET,利用 script 标签的 src 属性不受同源限制。CORS 是标准方案,需要后端设置 Access-Control-Allow-Origin 等响应头。开发环境常用代理,生产环境常用 Nginx。
  3. 【回答框架 3】在 Vue 项目中,开发阶段通常在 vue.config.js 中配置 devServer.proxy 将请求代理到目标服务器,避免浏览器跨域。生产环境则可由 Nginx 配置反向代理,将前端静态资源与 API 请求放在同一域下,或配置 CORS。
  4. 【回答框架 4】选择方案时要考虑兼容性、安全性、后端支持程度。CORS 需要后端配合,JSONP 有安全风险且功能受限,代理方案只适用于开发环境或特定部署。实际项目中往往组合使用,例如开发用代理,生产用 Nginx 或 CORS。
  5. 【关键点 1】同源策略要求协议、域名、端口三者一致。
  6. 【关键点 2】CORS 是标准跨域方案,需要后端配合设置响应头。
  7. 【关键点 3】开发环境常用 Vue CLI 的 devServer.proxy 实现代理。
  8. 【关键点 4】生产环境常用 Nginx 反向代理或 CORS。
  9. 【易错点 1】JSONP 只支持 GET 请求,且有安全隐患,需注意回调函数名等。
  10. 【易错点 2】代理配置需要注意 pathRewrite 等细节,否则可能请求路径错误。