单页应用程序(SPA)是一种越来越流行的Web应用程序模型，它的主要特点是在一个页面中加载应用程序并及时更新。在许多情况下，SPA会涉及到与多个服务器交互的问题，这就会导致一系列跨域问题。本文将介绍 SPA 中常见的 5 个跨域问题及解决方案。
什么是跨域请求？
在同一站点(同一来源)中，浏览器允许向不同的端口地址发送请求。但是，在不同的来源(如从 http://localhost 发出的 Ajax 请求访问了 http://www.example.com)时，浏览器会禁止此类请求。这是因为浏览器实施了一种名为 "Same-Origin Policy"(同源策略)的安全措施，该策略要求在使用相同的域名、端口和协议(如使用 http:// 协议)的情况下，才能与请求打开对话。
1. JSONP
JSONP是在实现JS跨域访问中最常见的一种方式，它的原理是将请求转换为 JavaScript 脚本的形式，利用script标签进行跨域请求，服务端返回一段JavaScript代码，浏览器解析代码并执行相应的回调函数。
在发起JSONP请求时，需要向服务端传递一个回调函数名，这个函数名需要指定在响应数据中的哪个位置运行。
下面是一个JSONP请求的例子：
-- -------------------- ---- ------- -------- ------------- --------- - --- ------ - --------------------------------- ---------- - --- - ------------ - --------- ---------------------------------- - -------- -------------- - ------------------ - ------------------------------------------ ------------
服务端返回的响应数据格式类似下面的代码：
callback({ a: 1 });2. CORS
CORS(Cross-origin Resource Sharing)是 HTML5 中引入的一种跨域请求方式，它允许通过将权限访问的头信息加入 HTTP 请求头而使服务器允许特定的源从一个服务器向另一个服务器发起跨域请求。
使用CORS的方式可以简单实现跨域请求，但需要注意一些细节，如要在服务端设置响应头的Access-Control-Allow-Origin属性为请求的源。下面的代码演示了在客户端使用CORS的请求方式：
-- -------------------- ---- -------
----- --- - --- -----------------
--------------- --------------------------------- ------
------------------- - -----
---------------------- - ---------- -
-- --------------- -- - -- ---------- -- ---- -
------------------------------
-
--
-----------3. 代理方式
代理方式实际上是通过Nginx、node-http-proxy等反向代理服务器中转请求，对于客户端来说，它并不知道它请求的是代理服务器，而不是真正的服务端。该方式需要一个第三方服务器，相对来说比较复杂。
下面的代码演示了通过代理服务器方法进行请求：
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8080/proxy/api/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.send();4. WebSocket
WebSocket是一个持久连接，它通过一个单一的TCP连接实现了全双工通信，需要客户端和服务端同时支持WebSocket协议。
下面的代码演示了如何在浏览器中使用WebSocket方式：
const socket = new WebSocket("ws://localhost:8080/ws");
socket.onopen = function() {
console.log("连接已经打开");
};
socket.onmessage = function(event) {
console.log(event.data);
};5. postMessage通信
postMessage可以用于在浏览器窗口之间安全传递字符串消息。可以通过它来实现跨域请求。下面的代码演示了该方法：
-- -------------------- ---- -------
-- -----
------------- - ---------- -
----- ------ - ---------------------------------
---------- - ------------------------
----- --------- - ------------------------
------------- - -------- -- -
--------------------------------------- -------- -----------
--
----------------------------------
--
-- -----
---------------------------------- --------------- -
--------------- --- ----------------------- - -------
------------ ---------- --
---结论
在学习和使用SPA时，会发现跨域问题是一个常见的挑战。本文中介绍了常用的5种跨域问题和解决方案，但是不同的场景和需求使用不同的方式。我们需要根据情况选择合适的方法来处理跨域请求问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67048a00d91dce0dc84f3133