如何实现跨域访问 RESTful API
在前端开发中，我们经常会需要通过 AJAX 调用 RESTful API 进行数据交互。但是由于浏览器的同源策略限制，我们无法直接在前端代码中跨域访问其它域下的 API。本文将介绍如何通过 CORS 和 JSONP 等技术实现跨域访问 RESTful API。
一、CORS
CORS（Cross-origin resource sharing）是一个 W3C 标准，通过在服务端设置响应头的方式实现跨域访问。CORS 要求服务端增加一些特定的响应头信息，让浏览器可以将服务器端的数据返回给前端。
下面是一个 Node.js 的示例，实现跨域访问 RESTful API：
-- -------------------- ---- -------
----- ------- - ------------------
----- --- - ---------
--------------------- ---- ----- -
-------------------------------------------- ----
--------------------------------------------- ----- ----- ---- --------
--------------------------------------------- ---------------
------
--
--------------------- ------------- ---- -
----- ----- - -
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
-
---------------
--
---------------- ---------- -
----------------- --- --------- -- ---- -------
--在这个示例中，我们使用 Express 框架创建了一个简单的服务端，处理了 /api/users 的 GET 请求，并且在响应头中增加了跨域访问所需的头信息。通过这样的设置，前端就可以直接访问这个 API 了。
二、JSONP
JSONP（JSON with Padding）是一种跨域访问的方式，它通过在 HTML 中添加一个 <script> 标签，以回调函数的形式获取远程数据。JSONP 要求远程服务器能够返回 JSON 格式数据，并且在返回数据的同时，将其包裹在一个函数调用中，这个函数名由前端在请求中指定。
下面是一个使用 jQuery 实现 JSONP 的示例：
-- -------------------- ---- -------
--------
---- -----------------------------------------------
----- ------
--------- --------
------ -----------
-------------- ------
-------- -------------- -
-----------------
--
------ ------------- ------- ---- -
--------------------- ----
-
--在这个示例中，我们使用了 jQuery 的 $.ajax() 方法，通过指定 dataType 参数为 'jsonp' 来使用 JSONP 技术。同时，我们在 URL 中指定了回调函数名为 'foo'，在响应数据的时候，服务器会将数据包裹在 foo() 的调用中返回，从而让前端代码能够获取到数据。
三、总结
通过 CORS 和 JSONP 技术，我们可以方便地访问跨域 RESTful API，但是需要注意的是，CORS 技术需要在服务端进行相关配置，而 JSONP 技术需要远程服务器能够支持，并且容易受到 XSS 攻击。在实践中需要根据具体情况选择合适的技术方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6494e7c748841e9894236b83