前言
前端领域中，单页应用（SPA）正日渐成为应用开发时的主流。SPA 的优点是无需刷新页面，页面响应更迅速，交互更流畅。但 SPA 应用在开发中也会遇到跨域问题，这就是贯穿一篇文章的主题。本文将围绕 SPA 应用中常见的跨域问题，介绍常见的解决方案，并附带示例代码讲解。
什么是跨域
跨域（Cross-Origin）指的是浏览器根据同源策略（Same-Origin Policy），限制了网页脚本对于不同源之间的资源访问。同源策略有两个限制：
- 协议限制：必须使用相同的协议（http或https）；
- 域名限制：必须使用相同的域名或子域名；
- 端口限制：必须使用相同的端口号。
如果客户端向服务器请求页面、脚本或者AJAX请求，且它们的源与当前页面的源不一致，那么浏览器会阻止这些非同源请求。
跨域问题的表现
跨域问题不仅体现在 Ajax 请求中，也包括页面引用外部资源，如图片、样式表、脚本等。常见的跨域问题表现为：
- AJAX 请求失败（通常是没有响应）；
- 读取不到 cookie、localStorage 和 sessionStorage；
- 收不到服务器响应；
- 请求被拦截或是跳转到错误的页面；
常见的跨域解决方案
跨域问题有很多解决方案，以下列出几个常见的跨域解决方案。
JSONP
JSONP（JSON with Padding）是一种跨域通信方式，它的实现基于服务器向客户端返回一段 JavaScript 代码，客户端再调用这段 JavaScript 代码从而获得数据。由于该代码属于当前页面的脚本，因此可以避免跨域限制。JSONP跨域可以使用 script 标签，其示例代码如下：
-------- -------------------- - ------------------ - ----- ------ - --------------------------------- ---------- - ---------------------------------------------------------- ----------------------------------
CORS
CORS（Cross-Origin Resource Sharing）是一种用于跨域访问的协议，其本质是通过为响应头添加Access-Control-Allow-Headers、Access-Control-Allow-Methods、Access-Control-Allow-Origin等信息，来告知浏览器该资源允许跨域访问从而达到跨域的目的。需要服务器端进行配置。服务器端需要设置响应头，允许跨域访问：
-- ------- ---- ------------------------------------------------- ----- -------------------------------------------------- ----- ----- ---- --------- -------------------------------------------------- ---------------------------------
代理
代理是通过服务器端转发请求的方式来解决跨域问题的方法。实现方式是在客户端向服务器请求时，将跨域请求转发到服务器端，由服务器端请求目标地址并返回结果给客户端，从而绕过跨域限制。需要在服务器端进行配置。其示例代码如下：
-- ------- ----
----- ---- - ----------------
----- --- - ---------------
----- ----- - -------------------------- --------- --------- -
----- ------- - ---------------------------------- - -------------
----- --------- - --------------------- -------- ---------------- -
--------------------------------------------- ------------------------
------------------------------
---
------------------------
---
------------------ -------- -- -
------------------ ------ ------- -- ---- -------
---结论
跨域是前端应用开发过程中必须面对的一个问题，它限制了网页脚本对于不同源之间的资源访问。本文介绍了常见的跨域解决方案并提供相应的示例代码，通过学习这些内容，读者们能够更好地理解和解决跨域问题。除了介绍的方法，还有其他的解决方案，需要我们在实际开发中结合具体情况进行选择。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670dc69b5f551281025e5da7