欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-03-20 20:17:40
jsonp的本质是通过script标签的src属性请求到服务端，拿到到服务端返回的数据 ，因为src是可以跨域的。前端通过src发送跨域请求时在请求的url带上回调函数，服务端收到请求时，接受前端传过来的回掉函数名称，将其拼接成js函数调用返回到前端即可完成跨域请求。 前端实现代码： .Net服务端 ......

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);
        }
    }
}

 

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

 

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

上一篇： 结构型模式：外观模式

下一篇： python面试题之如何在Python中创建自己的包

推荐阅读