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

2019-05-08 07:25:15来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

 

 


原文链接:https://www.cnblogs.com/heheblog/p/10816828.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Vue.js 学习笔记 第7章 组件详解

下一篇:Jquery会死吗?我为什么不用vue写富文本!