跨域请求简介
在 Web 开发中，由于浏览器的同源策略限制，只有在域名、协议和端口号完全一致的情况下，才能够正常进行 Ajax 请求和共享资源。而在实际开发过程中，往往需要进行不同域之间的数据交互，这就需要使用跨域技术来解决。
CORS（跨域资源共享）
CORS 是目前广泛使用的跨域解决方案。它是一个基于 HTTP 头部的机制，允许服务器告诉浏览器哪些外部源是可信的，并且允许浏览器向这些源发送 AJAX 请求。在 Node.js 中，可以使用 express 框架来轻松启用 CORS。
以下是一个使用 Node.js 和 Express 启用 CORS 响应头的示例代码：
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());JSONP（JSON with Padding）
JSONP 是一种通过动态创建 <script> 标签并指定 JSON 数据的回调函数名来实现跨域通信的方式。这种方式只能实现 GET 请求，但可以解决 Ajax 请求跨域的问题。
以下是一个使用 jQuery 发送 JSONP 请求的示例代码：
$.ajax({
url: 'https://example.com/api',
dataType: 'jsonp',
jsonp: 'callback',
success: function(data) {
console.log(data);
}
});代理服务器
代理服务器是一种将客户端请求转发给目标服务器的中间件。在使用代理服务器时，客户端只需要与代理服务器通信，而不需要直接连接目标服务器，这就避免了浏览器的跨域限制。
以下是一个使用 Nginx 配置代理服务器的示例代码：
location /api {
proxy_pass https://example.com;
}WebSocket
WebSocket 是一种全双工通信协议，在建立连接后，客户端和服务器可以互相发送数据。使用 WebSocket 可以轻松地实现跨域通信，并且不会受到浏览器的同源策略的限制。
以下是一个使用 Socket.io 实现 WebSocket 连接的示例代码：
-- -------------------- ---- -------
----- -- - -------------------------- -
----- -
------- ----------------------
-------- ------- -------
-
---
------------------- -------- -- -
-------------- ---- ------------
---结论
跨域技术是 Web 开发中必不可少的一部分。通过理解并掌握 CORS、JSONP、代理服务器和 WebSocket 等技术，开发人员能够轻松处理不同域之间的数据交互问题，从而提高应用程序的交互性和可用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672d3c3addd3a70eb6d9feca