码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-05-05 23:22:07      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:传参   viewport   type   --   回调函数   namespace   代码   htm   前端   

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的实现

标签:传参   viewport   type   --   回调函数   namespace   代码   htm   前端   

原文地址:https://www.cnblogs.com/heheblog/p/10816828.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!