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