当前位置：首页 > article >正文

前端跨越方式有哪些

article 2024/12/22 10:22:40

发现宝藏

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。【宝藏入口】。

前端跨域（Cross-Origin Resource Sharing，CORS）是指在不同源（protocol、domain、port）之间进行数据交互的过程。由于浏览器的同源策略（Same-Origin Policy）限制，前端 JavaScript 脚本只能访问同一源的资源，而无法直接访问不同源的资源。为了实现不同源之间的资源共享，常用的跨域解决方案有以下几种：

1. CORS（Cross-Origin Resource Sharing）

CORS 是最常用的一种跨域方式，它通过服务器端的 HTTP 响应头来告知浏览器允许跨域请求。具体做法是，服务器通过设置相应的 HTTP 头部，明确哪些来源可以访问其资源。

主要的 CORS 相关 HTTP 响应头：
- Access-Control-Allow-Origin：指定允许跨域的来源，值可以是具体的域名（如 https://example.com）或者 *（表示允许所有域访问）。
- Access-Control-Allow-Methods：指定允许的 HTTP 方法（如 GET、POST、PUT、DELETE 等）。
- Access-Control-Allow-Headers：指定允许的请求头。
- Access-Control-Allow-Credentials：是否允许发送 Cookie 和 HTTP 认证信息（值为 true 或 false）。
- Access-Control-Max-Age：指定预检请求（preflight request）缓存的时间。
使用场景：
- 当前端请求服务器的资源时，后端必须在响应头中配置 CORS 相关的头部，浏览器才会允许跨域请求。

例子：

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Credentials: true

2. JSONP（JSON with Padding）

JSONP 是一种较早的跨域解决方案，通过动态插入 <script> 标签来跨域请求数据。<script> 标签没有跨域限制，因此可以从不同源加载 JavaScript 文件。JSONP 通过回调函数来传递数据。

原理：
- 前端在请求中传递一个回调函数名，服务器返回一个包含回调函数调用的 JavaScript 脚本，脚本执行时会调用回调函数并传递数据。
使用场景：
- 适用于只需要 GET 请求的场景，且通常只获取数据，不需要修改服务器数据。
- 由于 JSONP 是通过 <script> 标签来实现的，因此只能进行 GET 请求。

例子：

// 前端请求
<script src="https://api.example.com/data?callback=myCallback"></script>

// 服务器返回
myCallback({ name: 'John', age: 30 });

缺点：
- 只能支持 GET 请求。
- 存在一定的安全风险，因为服务器返回的内容是 JavaScript 代码，可能被利用进行恶意操作。

3. WebSocket

WebSocket 是一种基于 TCP 的协议，用于建立持久的双向通信连接，它是跨域的，并且不受同源策略的限制。WebSocket 可以在客户端和服务器之间进行实时、双向的数据交换，常用于实时应用（如即时消息、在线游戏等）。

原理：
- 客户端通过 WebSocket 连接到服务器（使用 ws:// 或 wss:// 协议），建立起一个持久的连接，之后可以实时地发送和接收数据。
使用场景：
- 用于需要高频次、低延迟通信的应用，如在线聊天、实时通知、股票行情、实时数据流等。
优点：
- 不受同源策略的限制。
- 实时通信，低延迟，双向数据传输。
缺点：
- 需要 WebSocket 服务器的支持。
- 相较于传统 HTTP 请求，WebSocket 的使用和配置较为复杂。

4. PostMessage

PostMessage 是 HTML5 提供的跨域消息传递机制，允许不同源的窗口（如 iframe、弹出窗口、父窗口）之间传递消息。

原理：
- 使用 window.postMessage() 方法在不同的窗口或 iframe 中发送消息。目标窗口可以通过监听 message 事件来接收消息。
使用场景：
- 在父子窗口、嵌套 iframe、不同标签页或不同域之间传递消息时。
- 适用于跨域通信，但不涉及数据传输的详细内容。

例子：

// 父窗口发送消息
iframe.contentWindow.postMessage('Hello from parent', 'https://child-domain.com');

// 子窗口接收消息
window.addEventListener('message', (event) => {
  if (event.origin === 'https://parent-domain.com') {
    console.log('Message received:', event.data);
  }
});