常见的几种前端跨域方式

最新推荐文章于 2024-05-08 09:15:00 发布

大锤JavaScript

最新推荐文章于 2024-05-08 09:15:00 发布

阅读量237

点赞数 3

文章标签：前端 javascript

本文链接：https://blog.csdn.net/new_handsome/article/details/133432212

版权

当在 JavaScript 中进行跨域请求（即在不同域名或端口之间进行网络请求）时，由于同源策略的限制，浏览器会阻止跨域请求。为了解决这个问题，我们可以采用以下几种常见的跨域处理方案。

JSONP（JSON with Padding）
CORS（跨域资源共享）
代理服务器
WebSocket

下面我将为你详细解释这些方案，并提供相应的代码示例说明。

1. JSONP（JSON with Padding）

JSONP 是一种通过动态创建 <script> 标签来实现的跨域请求方式。由于 <script> 标签的 src 属性不受同源策略的限制，因此可以实现跨域请求，并通过回调函数将数据传递到页面中。

function handleResponse(data) {
  console.log(data);
}

const script = document.createElement('script');
script.src = 'http://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

在上面的示例中，我们创建了一个名为 handleResponse 的回调函数，并将它作为参数传递给 callback。在请求 URL 中包含回调参数，服务器需要将数据包装在回调函数中返回，例如返回 handleResponse({"name": "John"})。通过这种方式，我们可以在 handleResponse 函数中获取返回的数据。

2. CORS（跨域资源共享）

CORS 是一种基于 HTTP 头部的机制，允许服务器声明哪些源可以访问资源。在使用 CORS 时，我们需要在服务器的响应中设置相应的头部信息。

对于简单请求（使用 GET、HEAD、POST 方法之一，且不包含自定义头部字段），浏览器会自动发送 OPTIONS 请求到服务器，询问服务器是否允许跨域请求。服务器需要返回合适的响应头，例如：

Access-Control-Allow-Origin: http://example.com // 允许的源
Access-Control-Allow-Methods: GET, POST // 允许的方法
Access-Control-Allow-Headers: Content-Type // 允许的自定义头部字段

对于复杂请求（使用了 OPTIONS 以外的其他方法，或者包含了自定义头部字段），浏览器会先发送 OPTIONS 请求，询问服务器是否允许实际的请求。服务器需要返回上述的响应头，并在实际请求的响应中同样包含这些头部信息。

3. 代理服务器

代理服务器是一种将浏览器的请求转发到目标服务器的中间服务。通过在自己的服务器上请求目标服务器并返回结果给浏览器，避免了浏览器的跨域请求限制。

在使用代理服务器时，我们的页面将请求自己的服务器，再由服务器代理请求目标服务器的资源。以下是一个使用 Node.js 创建代理服务器的示例：

const http = require('http');
const request = require('request');

const server = http.createServer((req, res) => {
  const url = 'http://api.example.com' + req.url;
  req.pipe(request(url)).pipe(res);
});

server.listen(3000); // 监听本地的3000端口

在上面的示例中，我们创建了一个 Node.js 的 HTTP 服务器，并使用 request 模块将浏览器请求转发到目标服务器。通过这种方式，我们绕过了浏览器的跨域限制，并获取到了目标服务器的响应。

4. WebSocket

WebSocket 是一种基于 TCP 协议的全双工通信协议，在客户端和服务器之间建立持久性的连接。WebSocket 不受同源策略的限制，可用于实现跨域通信。

const socket = new WebSocket('ws://api.example.com/socket');

socket.addEventListener('open', () => {
  console.log('WebSocket 连接已建立');
});

socket.addEventListener('message('message', (event) => {
  console.log('收到消息:', event.data);
});

socket.addEventListener('close', () => {
  console.log('WebSocket 连接已关闭');
});

socket.addEventListener('error', (error) => {
  console.error('WebSocket 错误:', error);
});