jsonp 方法解决跨域

JSONP 是一种解决跨域问题的常用方法，它利用了 script 标签不受同源策略限制的特性。具体实现方法如下：

1. 服务器端需要提供一个回调函数，该函数的名称由客户端通过 URL 参数传递。
2. 客户端通过动态创建 script 标签的方式向服务器发送请求，并传递回调函数名称作为 URL 参数。
3. 服务器端将返回的数据包装在回调函数中，并将其作为 JavaScript 代码返回给客户端。
4. 客户端接收到响应后，会自动执行回调函数，从而获取到服务器返回的数据。

以下是一个使用 JSONP 解决跨域问题的示例：

服务端代码（假设回调函数名称为callback）：

import json

def jsonp(request):
    data = {
        'name': '张三',
        'age': 20,
        'gender': '男'
    }
    callback = request.GET.get('callback')
    response_data = json.dumps(data)
    response = f"{callback}({response_data})"
    return HttpResponse(response, content_type='application/javascript')

客户端代码：

function jsonp(url, callback) {
    const script = document.createElement('script');
    script.src = `${url}&callback=${callback}`;
    document.body.appendChild(script);
}

function callback(data) {
    console.log(data);
}

jsonp('http://example.com/jsonp', 'callback');

在上面的示例中，客户端调用 jsonp 函数时，会向 http://example.com/jsonp 发送一个跨域请求，并指定回调函数名称为 callback。服务端返回的数据会被包裹在 callback 函数中，并以 JavaScript 代码的形式返回给客户端。客户端接收到响应后，会自动执行 callback 函数，从而获取到服务器返回的数据。