1. 跨域问题解决代码demo

jsonp的方式

  • html文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端通过jsonp解决跨域问题</title>
</head>
<body>
<label for="msg">jsonp解决跨域问题</label>
<textarea name="多行文本标签" id="msg" cols="30" rows="10">
    客户端:
    通过js代码动态script标签，将请求生成src
    定义一个回调函数
    服务端:
    获取到回调函数名
    返回数据格式：函数名(数据）
    https://www.cnblogs.com/izengbin/p/7239782.html
</textarea>


</body>

<div>
    <input type='button' onclick='get_data()' value="点击获取">
</div>


<script>

    function get_data() {
        // 发送一个jsonp请求
        let tag = document.createElement('script');
        tag.src = "http://127.0.0.1:9528/jsonp?callback=jsonp";
        document.head.appendChild(tag);
        //document.head.removed(tag);    // 发送请求完后动态删除标签#}
    }

    // 定义一个和callback函数名一样的函数
    function jsonp(arg) {
        console.log("响应为：" + arg);
        alert(arg)
    }

</script>

</html>
  • 后端文件
#!/usr/bin/env python
# -*- coding:utf-8 -*-
# datetime:2021/9/9 0009
from flask import Flask,request

app = Flask(__name__)


@app.route("/jsonp")
def index():
    arg = request.args.get("callback")
    return f"{arg}('hello-jsonp')"


if __name__ == '__main__':
    app.run('127.0.0.1', '9528')
posted @ 2021-09-09 16:31  Alive_2020  阅读(75)  评论(0)  编辑  收藏  举报