前端面试题 | 跨域

image

打铁趁热。

上一期，我们提到同源策略的一些限制，包括：

• 浏览器中页面与页面之间的访问限制

• 浏览器与服务器之间的请求访问限制

而越过同源策略的限制，我们称之为跨域。

比如最常见的：开发阶段需要请求线上服务器资源。

此时本地的页面与线上服务器肯定不同源，这就需要跨域解决。

JSONP、使用代理服务器、跨源资源共享（CORS）、使用 WebSocket 等都是常见的办法。

在 《JavaScript 高级程序设计（第三版）》586页 中，还提到一种有趣的技术：

图像 Ping。

利用动态创建 来触发链接，就像从页面向服务器发送了一个 Ping 请求，实现了浏览器向服务器的单向通讯。

上面提到的都是浏览器与服务器之间的跨域方案。

但是不要忽略了——

还有浏览器与浏览器之间的跨域。

关于页面间的跨域，最值得关注的是 window.postMessage() 这个 API ，调用它能将消息发送到其他页面。

今天给大家带来的也是一道比较简单的跨域题目。

---

题目

在前端项目开发过程中，如果需要 Get 请求线上数据，下列几种跨域方案中，哪一种不需要依赖服务器端？

• A. 跨源资源共享（CORS）
• B. JSONP
• C. 配置代理服务器
• D. WebSocket

正确答案：C

解析：

跨源资源共享（CORS）需要服务器端在返回报文的头部做相应处理。

JSONP 需要服务器端将 JSON 数据填充（Padding）到前后端约定的字段中返回。

WebSocket 通信协议需要后端的支持才能启用。

所以，只有配置代理服务器，这种方案可以不依赖服务器端。只需要在本地配置好代理服务器，实现请求的转发，即可进行跨域请求。

---

点击「跨域测试」，一道小题目测试你对跨域的理解。