当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 前端跨域之Jsonp实现原理及.Net下Jsonp的实现

前端跨域之Jsonp实现原理及.Net下Jsonp的实现

2019年05月06日  | 移动技术网IT编程  | 我要评论

jsonp的本质是通过script标签的src属性请求到服务端，拿到到服务端返回的数据 ，因为src是可以跨域的。前端通过src发送跨域请求时在请求的url带上回调函数，服务端收到请求时，接受前端传过来的回掉函数名称，将其拼接成js函数调用返回到前端即可完成跨域请求。

前端实现代码：

<!doctype html>
<html lang="en">

<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>
</head>

<body>

</body>

</html>
<script>
    function successfun(data) {
        console.log(data);
    }
    function show(data) {
        console.log(data);
    }
</script>
<!-- 把请求的成功的回掉函数名称通过url传参传到服务端，服务端返回时需要拼接一个函数调用返回到前端 -->
<script src="https://localhost:44381/home/action?cb=show"></script>
<script src="https://localhost:44381/home/getscript?cb=successfun"></script>

 

 

.net服务端代码：

using system.collections.generic;
using microsoft.aspnetcore.mvc;
using newtonsoft.json;

namespace jsonp.controllers
{
    public class homecontroller : controller
    {
        public iactionresult action()
        {
            var cb = request.query["cb"];
            return content(cb + "(123)");
        }
        public iactionresult getscript()
        {
            var cb = request.query["cb"];
            var data = new list<int>()
            {
                1,2,3,4,5,6,8,9,6,3,5,2,0,3
            };
            var result = $"{cb}({jsonconvert.serializeobject(data)})";
            return content(result);
        }
    }
}

 

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网