22. Vue 使用 vue-resource 发起jsonp的基本原理

小半 • 2022年9月26日下午8:35 • 前端开发 • 阅读 188

需求

上一篇章「Vue 使用 vue-resource 发起get、post、jsonp请求的基本用法」讲诉了请求的基本使用方法，但是并没有详细讲诉「关于jsonp」的回调过程。

jsonp的基础原理，编写script调用远程链接进行方法回调

jsonp可以跨域请求数据，它的原理主要是利用了<script>标签可以跨域链接资源的特性。首先抛开jsonp请求，先来写一个直接通过<script>回调执行本地方法的一个示例。

「1. 在前端定义好script方法，并且访问远程服务进行回调」

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<script>
    // 1. 定义好准备接收远程返回的回调方法，用于执行回调
    function showInfo(data) {
        console.log(data)
    }
</script>

<!-- 2.调用远程服务，生成调用已定义好的showInfo方法，如下方示例代码 -->
<script src="http://127.0.0.1:5000/getscript?callback=showInfo"></script>

<!-- 3.示例回调方法的具体内容。
<script>
    var data = "hello world";
    showInfo(data)
</script>
-->

</body>
</html>

这里面其实具体执行起来，第2点和第3点是等价的，只不过第2点是通过远程服务返回生成的script脚本，调用本地的showInfo服务。

「2.在后端Flask编写返回的script字符串内容」

from flask import Flask, jsonify,request,make_response
import json

# 实例化app
app = Flask(import_name=__name__)

# 编写返回script内容
@app.route('/getscript', methods=["GET"])
def jsonp():

    return 'showInfo("远程回调显示内容：hello world")'

if __name__ == '__main__':
    app.run(debug=True)