jsonp的跨域实现原理

最新推荐文章于 2023-07-28 20:07:18 发布

大白兔123

最新推荐文章于 2023-07-28 20:07:18 发布

阅读量175

点赞数

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/weixin_42782004/article/details/102665478

版权

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

利用回调函数，实现jsonp跨域的实现

jsonp是一种传输格数据的用法，可以用于跨域问题的解决，首先跨域问题是什么呢？
两台不同服务器之间的前后端交互就是跨域问题，比如，百度服务器上有一个html，这个html想访问阿里服务器上的后台数据，就需要使用跨域，否则会因为协议问题，不能访问阿里上的后台数据，所以这就是jsonp跨域的出现原因。
jsonp的原理是使用标签，例如，script，css等标签是不存在跨域问题的，通过这些标签就可以实现数据的传输。代码如下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <script src="./lib/vue-resource.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
    <div id="app">
        <!-- 1、msgFormat是自己定义的过滤器的名称
             2、可以使用多个过滤器，并且初始的msg会先交给后面的过滤器然后处理过的字符串再交给再后面的过滤器执行-->
            <input type="button" value="get请求" v-on:click.prevent="getInfo">
            <input type="button" value="post请求" v-on:click.prevent="postInfo">
            <input type="button" value="jsonp请求" v-on:click.prevent="jsonpInfo">
    </div>

    <script>
        testFunction = function(data){
            console.log(data)
        }
    </script>
<script src="http://127.0.0.1:50009/test/?callback=testFunction"></script>

</body>
</html>

如上是我的html代码，其中最关键的一行是<script src="http://127.0.0.1:50009/test/?callback=testFunction"></script> 这一行，他访问了http://127.0.0.1:50009/test/?callback=testFunction 这个地址，并且后面有一个参数叫做callback 这个是传入数据的参数名（可以自定义），用于回调函数，当后台接收到callback这个值之后就会做相应的处理。向前台传一个字符串拼接的方法。如下后台传递的字符串。

import json
from flask import Flask,request

app = Flask(__name__)

@app.route("/test/",methods=['GET'])
def tests():
    #s=[{"id":"1","name":"zhangsan","Ctime":"123"},{"id":"2","name":"lisi","Ctime":"456"},{"id":"3","name":"王五","Ctime":"789"}]
    test = request.args.get('callback')
    print(test)
    return test+'(123)'
if __name__=='__main__':
    app.run(host='0.0.0.0',port=50009)

如上就是后台的代码，当收到前台的请求的时候就会收到callback参数传给前的值testFunction，然后后台拼接了一个字符串 ‘testFunction(123)’ 将这个字符串传给了前台。可是前台是一个script的标签啊，这个时候怎么办呢。script会解析这个字符串并且执行testFunction(123)这个方法，那么这个时候前台就会在后台打印一句话，‘123’这个字符，这个时候就完成了跨域的数据传递。