在前端开发中，当我们需要与其他域名下的服务器进行数据交互时，就会遇到跨站请求（CORS）的限制。跨站请求是浏览器为了安全考虑而引入的机制，以防止恶意网站利用跨域攻击用户隐私数据。然而，在一些特殊需求下，我们需要实现跨站请求，这时候 AngularJS 提供了一种解决方案：JSONP。
什么是 JSONP
JSONP（JSON with Padding）是一种跨站请求技术，通过 script 标签的 src 属性来实现异步加载外部脚本，从而绕过浏览器的同源策略。在 JSONP 中，服务器返回一段 JavaScript 代码，其中包含一个回调函数的调用，并将需要传递的数据作为参数传入。客户端定义一个回调函数，并将该函数的名称作为查询参数传递给服务器，服务器则将数据包装成回调函数调用的形式，最终 JavaScript 引擎解析并执行服务器返回的 JavaScript 代码，从而实现跨站请求。
AngularJS 中的 JSONP
在 AngularJS 中，使用 JSONP 进行跨站请求非常简单。首先，需要在 $http 服务中设置 jsonpCallbackParam 属性，指定回调参数的名称，默认为 "callback"。其次，在发起跨站请求时，需要使用 $http.jsonp() 方法，并指定请求 URL 和回调函数的名称。最后，在控制器中定义该回调函数即可获得服务器返回的数据。
下面是一个 AngularJS 中使用 JSONP 的示例代码：
-- -------------------- ---- -------
--------- -----
----- --------- ---------------
------
----- ----------------
------------ ------------
------- ------------------------------------------------------------------------------------
--------
----------------------- ---
--------------------------- ---------------- ------ -
-------------- - ---------- -
------------------------------------------------------------------
------------------------ -
----------- - --------------
---
--
----------------- - -------------- -
------------------
--
--
------------------------------- -
----------------------------------------- - -----------
---
---------
-------
----- -----------------------------
------- ------------------------ -------------
----------- - ------------
-------
-------在上面的代码中，我们首先定义了一个控制器 MyController，并在其中定义了两个方法：getData() 和 myCallback()。getData() 方法使用 $http.jsonp() 方法发起跨站请求，并指定回调函数的名称为 "JSON_CALLBACK"，AngularJS 会自动将其替换为随机生成的回调函数名称。服务器需要将数据包装成该回调函数调用的形式返回，例如：
JSON_CALLBACK({ "name": "John", "age": 30 })当服务器返回该数据时，AngularJS 会自动执行 myCallback() 方法，并将数据作为参数传入。在示例中，我们只是简单地输出了数据到控制台上。
最后，我们需要注意一点：由于 JSONP 是通过 script 标签来实现的，因此服务器返回的数据必须是合法的 JavaScript 代码，即不能使用 HTML、XML 或纯文本格式返回数据。
总结
使用 AngularJS 的 $http.jsonp() 方法可以很方便地解决跨站请求的问题。但是，由于 JSONP 存在一些安全问题，例如容易受到 CSRF（跨站请求伪造）攻击，因此不应该滥用。相比之下，使用 CORS 技术则
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1179