在前端开发中，常常需要访问第三方的 RESTful API 接口，但由于浏览器的跨域策略，可能会遇到无法访问的问题。本文将介绍如何解决这个问题，并提供示例代码。
什么是跨域访问
在浏览器中，当 JavaScript 代码所在的域名、端口或协议与请求的接口不同，则认为发起了跨域请求。默认情况下，浏览器会阻止跨域请求，以防止恶意的攻击行为。
解决跨域问题的方法
CORS（Cross-Origin Resource Sharing）
CORS 是 W3C 官方规范，全称为跨域资源共享。浏览器通过 CORS 头信息判断对请求的响应是否被允许。在服务端设置 Access-Control-Allow-Origin 头信息表示允许哪些域名访问服务端资源。
需要注意的是，CORS 只支持现代浏览器。
JSONP
JSONP（JSON with Padding）是一种跨域数据交互方式。通过动态创建 script 标签，指向提供数据服务的 URL，利用 script 标签没有跨域限制的特性实现跨域数据交互。
但是，JSONP 不能处理 POST 请求，也无法处理非 JSON 数据格式。
代理服务器
使用代理服务器可以绕过浏览器的跨域限制。前端先将请求发送到自己的服务器，然后由自己的服务器代为请求目标接口，并将结果返回给前端。
示例代码
使用 AJAX 调用 RESTful API
-- -------------------- ---- -------
--------
---- -------------------------------------
----- -------
----- --------------------- ------------
--------- -------
------------ -------------------
-------- -------------- -
------------------
--
------ ------------- ------- ------ -
------------------- -- ---- ------- ---- - - -------
-
---通过 Proxy 服务器访问 RESTful API
-- -------------------- ---- -------
--------
---- -------------
----- -------
----- ------------------------ ------------------------------------- ----- ------ -------------
--------- -------
------------ -------------------
-------- -------------- -
------------------
--
------ ------------- ------- ------ -
------------------- -- ---- ------- ---- - - -------
-
---在前端中，我们可以通过使用 jQuery 的 AJAX 封装函数，调用 RESTful API。如果使用代理服务器，需要在前端代码中增加一个 /proxy_api 的请求，将 API URL 和请求参数一起发送到 Proxy 服务器上，由代理服务器请求目标接口，最后将结果返回给前端。
总结
了解跨域问题对于前端开发来说是必须的，通过本文介绍的三种方式，可以有效地解决浏览器禁止跨域访问 RESTful API 的问题。但各种方法都有各自的缺点，需要根据具体需求选择合适的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647da7e2968c7c53b0876145