Jsonp post 跨域方案-JavaScript中文网-JavaScript教程资源分享门户

什么是跨域？

在 Web 开发中，当一个网页的脚本代码试图访问与其所属的域名不同的域名下的资源时，就会触发跨域问题。这个限制是由浏览器实施的安全策略导致的。

例如，假设我们的网站域名为 www.example.com，那么如果我们试图使用 Ajax 来获取 api.example.net 下的数据，就会因为跨域而失败。这是由于浏览器禁止从一个域中加载另一个域的内容（包括脚本、样式表等）。

Jsonp 的原理

Jsonp（JSON with Padding）是一种跨域解决方案，它利用了 HTML5 规范中 script 标签可以跨域加载资源的特性。

Jsonp 的基本原理就是利用 script 标签不受跨域限制的特点，在客户端动态创建 script 标签，通过 script 标签的 src 属性加载服务器端的数据，服务器端将数据封装到指定的 callback 函数中，并返回给客户端，客户端就可以通过回调函数来处理服务器端返回的数据了。

具体来说，需要经过以下几个步骤：

客户端定义一个回调函数，以备服务器返回数据时调用。
客户端动态创建一个 script 标签，指定其 src 属性为服务器端的地址，并在 URL 中传递回调函数名作为参数。
服务器端将数据封装到回调函数中，并返回给客户端。
客户端收到服务器端返回的数据后，会自动执行回调函数并处理数据。

Jsonp 的优缺点

Jsonp 的优点在于它是一种简单易用的跨域方案，可以实现跨域请求数据，也可以实现跨域提交数据。同时，Jsonp 支持浏览器和服务器之间的双向通信，可以实现服务器推送数据到客户端。

Jsonp 的缺点在于它只支持 GET 请求，不支持 POST 等其他类型的请求，因此不太适合进行复杂的数据交互。此外，Jsonp 的安全性也存在一定的问题，因为它需要客户端和服务器共同约定好回调函数的名称，否则可能会被恶意用户利用来执行 XSS 攻击。

Jsonp 跨域示例代码

以下是一个简单的示例代码，用于演示如何使用 Jsonp 实现跨域请求数据：

function handleResponse(data) {
  console.log("Received data: ", data);
}

var script = document.createElement("script");
script.src = "http://example.com/api/getData?callback=handleResponse";
document.head.appendChild(script);

这个示例代码中，我们定义了一个名为 handleResponse 的回调函数，当服务器返回数据时会自动调用该函数并传递数据作为参数。

然后，我们通过动态创建一个 script 标签，并将其 src 属性设置为我们要请求的地址。在 URL 中传递了一个名为 callback 的参数，其中包含了回调函数的名称。这个参数告诉服务器需要将数据封装到哪个回调函数中。

最后，我们将创建的 script 标签添加到页面中，并等待服务器返回数据。当数据返回时，会自动调用我们定义的回调函数，并将数据作为参数传递给它。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/3545