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

Devops海洋的渔夫

发布于 2020-04-16 17:22:14

7330

发布于 2020-04-16 17:22:14

文章被收录于专栏：Devops专栏Devops专栏

需求

上一篇章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)

启动服务，查看前端执行如下：

可以看到前端正常读取后端返回的showInfo("远程回调显示内容：hello world")内容，放入script中执行。

这就是jsonp的基本原理。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

vue.js

登录后参与评论

0 条评论

热度