前端面试中常见的跨域请求问题怎么回答？

前端面试中跨域请求问题解析与回答策略

---

在前端开发面试中，跨域请求问题几乎是必考的经典题目之一，当面试官问到“什么是跨域请求，如何解决跨域问题？”时，你应该明确回答：跨域请求是浏览器基于同源策略限制的一种安全机制，当前页面若向不同协议、域名或端口的地址发起请求，就会被视为跨域，浏览器会拦截此类响应，解决跨域的常见方法包括：CORS（跨域资源共享）、JSONP、代理服务器、以及通过 document.domain 或 window.postMessage 等方式处理特定场景下的跨域问题。

跨域问题的背景与原理

要深入理解跨域，首先要了解浏览器的同源策略，同源策略要求，若两个页面的协议、域名或端口不同，则无法直接访问彼此的 DOM 或请求资源（如通过 AJAX/Fetch），这一机制旨在防止恶意网站窃取用户数据,但也给合法的前后端分离开发带来了挑战。

典型跨域场景举例：

• 前端应用部署在 https://www.example.com，后端 API 部署在 https://api.example.com（不同子域）。
• 开发环境前端使用本地 localhost:3000,后端接口为远程服务器地址。

跨域问题的解决方案

1. CORS（跨域资源共享）

   • 原理：服务器在响应头中添加 Access-Control-Allow-Origin 等字段，声明允许哪些域名访问资源。
   • 实现：后端配置简单，例如在 Express 中使用 cors 中间件，或手动设置响应头。
   • 适用场景：最通用的解决方案，支持复杂请求（如带自定义头或方法的请求）。

2. JSONP（JSON with Padding）

   • 原理：利用 <script> 标签不受同源策略限制的特性，通过动态创建脚本并传入回调函数名，实现数据获取。
   • 实现：前端定义回调函数，后端返回包裹数据的函数调用字符串。
   • 局限：仅支持 GET 请求,且需后端配合。

3. 代理服务器

   • 原理：在开发或生产环境中，通过同源的代理服务器转发请求，绕过浏览器的跨域限制。
   • 实现：开发时可用 Webpack DevServer 或 Vite 的代理功能；生产环境可通过 Nginx 反向代理。
   • 优势：无需后端修改代码,适合前后端分离项目。

4. 其他方式

   • document.domain：仅适用于主域相同、子域不同的场景（如 a.example.com 和 b.example.com），通过设置相同 document.domain 实现 iframe 通信。
   • window.postMessage：安全地实现跨窗口通信，适用于 iframe 或弹出窗口与父页面的数据交互。

面试回答技巧与加分点

• 结构清晰：先解释跨域的成因，再分点列举解决方案，最后对比优缺点。
• 结合实际：举例说明你在项目中如何解决跨域问题，如“在 React 项目中，我通过配置 Webpack 代理解决了开发环境的跨域请求”。
• 深入原理：简要提及预检请求（Preflight）或 CORS 的安全机制，展示对底层知识的掌握。
• 关注安全：强调 CORS 相比 JSONP 的安全性优势,避免推荐已过时的方案。

跨域问题是前端开发中的高频考点，掌握其原理和多种解决方案不仅能应对面试，更是实际项目中的必备技能，理解 CORS 的核心机制、熟悉代理配置、并了解 JSONP 的适用场景，将使你在面试中脱颖而出，关注安全性和最佳实践,能进一步体现你的专业素养。