1. 什么是跨域问题
在 Web 开发中，浏览器的同源策略是一项非常重要的安全特性。同源策略限制了来自不同源（协议、域名、端口）之间的数据传输，如 Ajax 请求、Cookie 或 DOM 的读写等。这是由于这些数据可能会被恶意网站利用，从而引起安全问题。
而当我们在开发 RESTful API 时，如果 API 提供的服务不是本域下的资源，也就是当我们的前端应用从一个域名请求一个另一个域名的接口时，浏览器就会启用「跨域安全策略」，防止页面通过脚本进行恶意操作。
2. 跨域问题的解决方案
虽然浏览器具有跨域安全策略，但是在开发过程中我们不可避免地需要进行跨域操作。为了解决这个问题，我们有多种方式：
2.1 CORS
CORS（Cross-Origin Resource Sharing）跨源资源共享是一种跨域解决方案，它的出现是为了让 Javascript 能够安全地获取到 AJAX 请求所需的数据。CORS 就是 W3C 标准，属于跨域 HTTP 访问的一种方式，通过在响应头部设置「Access-Control-Allow-Origin」来实现。
例如：
Access-Control-Allow-Origin: *
这个值也可以指定是哪些域名可以访问这个资源，如：
Access-Control-Allow-Origin: https://example.com
这种方式虽然简单好用，但也会引起安全隐患，所以对服务端数据的安全性有要求的话，可以考虑使用其他解决方案。
2.2 JSONP
JSONP 是一个非官方的解决方案，只支持 GET 请求。这种方式利用 script 标签不受同源策略的限制，通过动态创建 script 标签来进行跨域操作。
例如：
-- -------------------- ---- -------
-------- --------------- --------- -
--- ------ - ---------------------------------
----------- - ------------------
-- -------------------- ----
------------------------- - -----------
-- ------------------ -- -------- -- ----------------- -- ------------
------------------------- - -----
-----------
-
--
- ---- - --------
------------- - -----------
-----------
--
-
---------- - ----
----------------------------------
-
------------------------------------------------------------ ---------- -
-- ----- ------------
--------------------
---其中，callback 参数就是服务端返回数据时要调用的函数名。
2.3 代理
代理是一种将客户端请求转发到服务端的技术，其关键在于将跨域的请求转成同域的请求。例如，我们的前端应用都是在本地运行的，而后端服务在远程服务器上运行，假设我们需要访问的接口 URL 是：
https://example.com/api
我们可以在本地启动一个代理服务器，将请求转发到后端服务：
http://localhost:3000/api
而代理服务器可以使用任意语言和框架实现，这里提供一个使用 node.js 的示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- --------- - ----------------------
----- -------- - ------------------------------
----------------------- ---- -- -
-- --- --- -----------
-- ------------------------ --- -- -
----------------- ---- - ------- --------------------- ---
-
----------------3. 总结
跨域问题是前端开发中非常常见的问题，本文中介绍了三种解决方案：CORS、JSONP 和代理。以上三种方案各有优劣，具体应根据实际需求进行选择。
在实际开发中，需要注意一些跨域的细节问题，例如「预检请求」和「携带 Cookie」等。总之，在跨域问题的解决方案上，多想一些，再选一些，才是更为合理的处理方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6496e92048841e9894417321