前端 Jsonp 跨域方案原理 json跨域的解决办法

#夏日生活打卡季#

JSONP（JSON with Padding）是一种常用的跨域数据请求策略，它的基本原理是利用 <script> 标签的 src 属性没有同源策略限制的特性来达到跨域的目的。

我们来详细解析 JSONP 的工作原理：

1. 构造请求：在前端，我们首先构造一个请求 URL，将需要的数据以查询参数的形式附加到 URL 上。这个 URL 通常还会包含一个特殊的查询参数，例如 callback，用来指定一个回调函数的名称。
2. 创建 script 标签：然后，我们动态创建一个 <script> 标签，并将其 src 属性设置为上一步构造的 URL。这个 <script> 标签一旦被插入到 HTML 文档中，浏览器就会开始加载 src 指向的资源。
3. 服务器响应：服务器接收到请求后，从查询参数中提取数据并进行处理。处理完毕后，服务器将处理结果包裹在一个函数调用中返回。这个函数的名称就是前端在请求中指定的回调函数的名称。
4. 执行回调函数：当浏览器接收到服务器的响应后，由于响应内容是一个函数调用，所以浏览器会尝试执行这个函数。前端需要预先定义这个回调函数，以处理从服务器接收到的数据。

JSONP 的缺点是只能进行 GET 请求，不能进行 POST 或其他类型的 HTTP 请求。此外，由于是通过插入 <script> 标签的方式获取数据，如果服务器响应的数据中含有恶意脚本，那么这些脚本将会被执行，从而带来安全风险。

由于以上缺点，现在更推荐使用 CORS（跨源资源共享）来进行跨域请求，CORS 不仅支持所有类型的 HTTP 请求，而且更安全。