zoukankan      html  css  js  c++  java
  • 前端跨域之Jsonp实现原理及.Net下Jsonp的实现

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

  • 相关阅读:
    super关键字
    aspcms 留言 搜索
    aspcms标签
    随机添加一个Class,Class提前写好
    python实现进度条
    linux 下获取文件名的md5值
    linux下 批量压缩与批量解压
    linux下批量新建/删除 文件或目录
    python——pip导出导入安装包
    python Scrapy爬虫框架
  • 原文地址:https://www.cnblogs.com/heheblog/p/10816828.html
Copyright © 2011-2022 走看看