zoukankan      html  css  js  c++  java
  • 跨域问题-jsonp

    前端
    同源策略并不会拦截静态资源请求,那么就将接口伪装成资源,然后后端配合返回一个前端预定义的方法调用,将返回值放入调用该函数的形参即可

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            //前端预定义
            function getName(rep){
                document.write(rep.name)
                console.log(rep)
            }
        </script>
    </head>
    <body>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script src="http://localhost:8082?callback=getName"></script>
    </body>
    </html>

    后端
    后端以node为例,其他语言大同小异

    var http = require("http");
    const url = require("url");
    http.createServer(function (request, response) {
        let params = url.parse(request.url,true);
        // 返回一段(js)代码【本质是字符串类型】,填充到html中那个script标签的src中。
        response.end(params.query.callback + `(${JSON.stringify({name:"abc"})})`);
    }).listen(8082);

    效果




    补充
    当然了,如果你觉得麻烦,你可以用jq的jsonp或者其他封装ajax支持jsonp的插件,效果一样

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script>
            let url='http://localhost:8082?callback=getName';
            $.ajax({
                url: url,
                type: "get",
                dataType: "jsonp",
                jsonpCallback: "getName",
                success: function (rep) {
                    document.write(rep.name)
                    console.log(rep)
    
                }
            })
        </script>
    </head>
    <body></body>
    </html>




  • 相关阅读:
    OpenJudge百炼习题解答(C++)--题4010:2011
    Centos6.5卸载图形化
    nfs远程挂载问题记录
    走马观花-浪里跳-学习英文
    weblogic部署存在中文乱码导致部署失败
    KMS11激活Window系列
    mysql8.x开启远程登录
    notepad++插件实现json、xml格式化
    RHEL SHELL快捷键
    linux-env命令解析
  • 原文地址:https://www.cnblogs.com/dshvv/p/9580036.html
Copyright © 2011-2022 走看看