zoukankan      html  css  js  c++  java
  • 跨源请求cors和jsonp

    0、产生跨域的原因

    浏览器的同源策略

    什么是浏览器的同源策略?

      src开发

      ajax禁止

    解决方法

    jsonp

      通过src绕过浏览器的同源策略

      缺点:只发送GET请求

    cors

      通过设置相应头

      分类

        简单请求  

        复杂请求  options 预检

    一、cors(常用简单)

    1、http://127.0.0.1:8000

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h2>django</h2>
    <input type="button" name="" id="getService" value="获取python的数据">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script>
        $("#getService").on('click', function () {
            // alert(123)
            $.ajax({
                // 目标域,获取数据
                url: "http://127.0.0.1:8002/service/",
                type: "get",
                success: function (data) {
                    console.log(data)
                    // console.log(typeof data)
                }
            });
        })
    </script>
    </body>
    </html>

    2、http://127.0.0.1:8002

    def service(request):
        dic = {"name": "python"}
        response = HttpResponse(json.dumps(dic))
        # 获取资源的ip
        response["Access-Control-Allow-Origin"] = "http://127.0.0.1:8000"
        return response

    CORS中间件

    https://www.cnblogs.com/wt7018/p/11531343.html

    二、jsonp

    1、http://127.0.0.1:8000

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h2>django</h2>
    <input type="button" name="" id="getService" value="获取python的数据">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script>
        $("#getService").on('click', function () {
            // alert(123)
            $.ajax({
                // 目标域,获取数据
                url: "http://127.0.0.1:8002/service/",
                type: "get",
                dataType: "jsonp",
                jsonp: "callbacks",
                // jsonpCallback: "abc",
                success: function (data) {
                    console.log(data)
                    // console.log(typeof data)
                }
            });
        })
    </script>
    </body>
    </html>

    2、http://127.0.0.1:8002

    def service(request):
        dic = {"name": "python"}
        dic_str = json.dumps(dic)
        func = request.GET.get("callbacks")
        print(func)
        return HttpResponse("{}('{}')".format(func, dic_str))
  • 相关阅读:
    监控系统播放音频断断续续的原因
    apachelog4cxx编译
    [架构]FileZilla Server架构分析
    MAC上命令行内容传递到剪贴板
    IOS上屏蔽SIGPIPE
    我想要这样的3g无线路由器
    【转】MySQL日期时间函数大全
    svnplot 将svn的日志导入数据库
    Foxmail for mac 1.0.0 使用小评
    Versions 升级了,不需要把命令行svn退到1.6了,哇咔咔
  • 原文地址:https://www.cnblogs.com/wt7018/p/11397492.html
Copyright © 2011-2022 走看看