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>




  • 相关阅读:
    jdbc连接数据库报ORA-12519错误
    Open CV 七种常见阈值分割
    开博第一天
    UIWebView的使用---safri
    转义符
    UIKIT_EXTERN 的简单用法
    iOS 基础 --- tableView的使用(一)
    iOS基础 --- 如何监听一个控件(UITextField篇)
    objective-C和C --- 《位运算》的使用(一)
    assin与weak的区别
  • 原文地址:https://www.cnblogs.com/dshvv/p/9580036.html
Copyright © 2011-2022 走看看