跨域问题是前端开发中经常遇到的一个问题，特别是在单页面应用（SPA）开发中更为常见。本文将介绍 SPA 应用中可能遇到的跨域问题，以及一些常见的解决方案。
什么是跨域问题
跨域问题指的是浏览器发起跨域请求时，由于浏览器的同源策略（Same-Origin Policy）机制，不能访问不同源的资源。同源策略指的是协议、域名、端口号均相同，则是同源，否则就是跨域。
例如，一个页面使用 JavaScript 发起了一个跨域请求（比如 ajax 请求、JSONP 访问等），则被访问的资源必须与加载该页面的协议、域名、端口号相同，否则请求就会被拒绝。
SPA 应用中的跨域问题
在 SPA 应用中，由于只有一个页面，而页面中通过 JavaScript 操作加载不同的数据，可能出现跨域访问的问题。例如，前端应用使用 HTTP 协议访问后台 API 服务（通常使用 HTTPS 协议），就会涉及到跨域问题。
此外，还可能出现在前后端分离的情况下，前端应用与后台 API 服务不在同一个域（甚至不在同一个主机）的情况。
跨域问题的解决方案
1. 代理
代理是解决跨域问题的一种常见方法。通过在同域的服务器端进行中转，将跨域请求转换为同源请求，然后再由服务器发起同源请求来获取数据。
例如，前端应用中需要访问后台 API 服务，而这个 API 服务不在同一个域中。可以在同域的服务器端配置一个代理接口，前端通过访问这个代理接口，再由服务器端将请求转换为后台 API 服务中的请求。
以下是一个使用 express.js 的代理示例代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - --------------------------------- ----- --- - ---------- --------------- ------ ------- ------------------------- ------------- ----- ------------ - -------- -- - ---- ---------------- -- -- ------------------- ----- -- ---- ---------展开代码
上述代码将请求 /api 转发到 http://api.example.com，并将响应返回给前端应用。
2. JSONP
JSONP 是用于解决跨域请求的另一种方法。JSONP 通过动态创建 script 标签，将跨域请求转换为同源请求。后台服务将数据包装为 JavaScript 函数的调用，前端通过该函数获取数据。
以下是一个 JSONP 的示例代码：
-- -------------------- ---- ------- -------- ---------- - ------ --- ----------------- ------- -- - ----- ------ - --------------------------------- ----- ------------ - ---------------------- -------------------- - ------ -- - -------------- ---------------------------------- ------ --------------------- -- ---------- - ---------------------------------- ---------------------------------- --- - --------------------------------------------------- -- - ------------------ ---展开代码
上述代码通过将请求转换为 http://api.example.com/user?id=1&callback=jsonp_1606319737408 的形式，并将后台服务返回的数据通过回调函数返回给前端应用。
使用 JSONP 的缺点是只能通过 GET 请求方式请求数据，且只能获取有限的数据，不利于数据操作。
3. CORS
CORS（Cross-Origin Resource Sharing）是一种新的解决跨域问题的方法。浏览器端引入 CORS，服务端开启 CORS，就可以实现浏览器和服务器的跨域通信。通过在服务端配置响应头，可以实现不同域之间的数据传输。
以下是一个使用 Express 进行 CORS 配置的示例代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ------------- ---- ----- -- - ----------------------------------------- ----- ------------------------------------------ ---------------- ------------------------------------------ ----- -- ----------- --- ---------- - ----------------------- - ---- - ------- - ---展开代码
上述代码配置了响应头，允许所有域名跨域访问，允许 HTTP 头部包含 Content-Type 属性，允许任意方法访问。如果是 OPTIONS 请求，则返回 204 状态码，否则执行 next 方法继续处理请求。
使用 CORS 的优点是不需要任何代理和转换，能够实现完整的数据读写，但需要服务端支持和配置，如果服务端没有开启 CORS，则无法实现跨域通信。
小结
本文介绍了 SPA 应用中可能遇到的跨域问题，以及常见的解决方案。熟练掌握这些方法有助于解决跨域问题，提升前端开发的效率和体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c9dbdae46428fe9e1b5c07
