Jsonp post 跨域方案

下面我将详细讲解 Jsonp post 跨域方案的完整攻略。

什么是 Jsonp post 跨域方案？

在前端开发中，常常会遇到需要跨越多个域名进行数据交互的问题，而出于安全考虑，浏览器出于安全策略的限制，不允许通过 ajax 请求访问跨域资源，这时可以采用 Jsonp post 跨域方案来实现数据交互。

Jsonp 是一种通过动态创建 script 标签跨域获取数据的方法，不受浏览器同源策略的限制。而 Jsonp post 是在 Jsonp 基础之上，又加入了 post 请求的处理方式，可以向服务器提交数据，并接收服务器返回的数据。

Jsonp post 跨域方案的实现步骤

1. 在客户端动态创建一个 script 标签，并设置其 src 属性为跨域访问的地址，地址中需要将要提交的数据动态拼接到 url 中。

2. 在服务器端获取客户端提交的数据，并进行处理。

3. 在服务器端将处理后的数据输出为一个 js 脚本，将要返回的数据作为脚本的参数传递给回调函数。

4. 在客户端定义一个回调函数来接收服务器返回的数据。

示例1：使用 jQuery 实现 Jsonp post 跨域访问

$.ajax({
    type: "POST",
    url: "http://otherdomain.com/data.php",
    data: {
        name: "test",
        age: 20
    },
    dataType: "jsonp",
    jsonp: "callback",
    success: function(data) {
        console.log("success");
    },
    error: function() {
        console.log("error");
    }
});

上述代码中，使用 jQuery 的 ajax 方法向另一个域名发起 post 请求，并且设置 dataType 为 jsonp，在请求中将参数拼接到 url 中，将回调函数名设置为 "callback"。服务器端返回数据时，返回的数据会作为回调函数的参数传递给客户端。

示例2：使用 javaScript 原生方式实现 Jsonp post 跨域访问

var data = {
    name: "test",
    age: 20
};
var script = document.createElement("script");
script.src = "http://otherdomain.com/data.php?callback=callbackFunc" + encodeURIComponent(JSON.stringify(data), null, "\t");
document.head.appendChild(script);

function callbackFunc(res) {
    console.log("success");
}

上述代码中，使用 javaScript 的原生方式创建 script 标签，并将提交的数据拼接到 url 中，使用 encodeURIComponent 对数据进行编码，将回调函数的名称设置为 "callbackFunc"。服务器端返回数据时，返回的数据会作为回调函数的参数传递给客户端。

以上就是 Jsonp post 跨域方案的完整攻略。