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>()

            {

                ,,,,,,,,,,,,,

            };

            var result = $"{cb}({JsonConvert.SerializeObject(data)})";

            return Content(result);

        }

    }

}

前端跨域之Jsonp实现原理及.Net下Jsonp的实现的更多相关文章

  1. 前端跨域（二）：JSONP

    上一篇文章 前端跨域(一):CORS 实现了跨域的一种解决方案,IE8 和其他浏览器分别通过 XDomainRequest 和 XHR 对象原生支持 CORS.这次我将补一补 Web 服务中也非常流行 ...

  2. 前端跨域问题相关知识详解（原生js和jquery两种方法实现jsonp跨域）

    1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...

  3. 前端跨域解决方案: JSONP的通俗解说和实践

     对于前端开发者而言,跨域是一个绕不开的话题.只有真正明白了各种方案的工作机制,才能针对性地进行跨域方案选型.本文将以探索者的视角,试图用最通俗的语言对一种"鼎鼎大名"的跨域解决方 ...

  4. 搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

    什么是跨域 跨域:一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容: 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源请求(内部的引用,脚本script,图片img,fr ...

  5. 前端跨域（一）：CORS

    上周做了一个移动端表单提交的页面,其中涉及到了跨域问题,想来也是惭愧,因为之前一直都没有遇到过这个问题,因此都没有深入探索过,只是知道有哪几种方式,这次终于借这个机会可以把遗留的知识点补一补了. 1. ...

  6. 用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面

    用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面 1.什么是跨域以及产生原因 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地 ...

  7. 完美解决前端跨域之 easyXDM 的使用和解析

    前端跨域问题在大型网站中是比较常见的问题.本文详细介绍了利用 easyXDM 解决前端跨域的原理细节和使用细节,具体使用时可以在文中代码实例的基础上扩展完成. 0.背景 因个别网络运营商存在 HTTP ...

  8. VUE006. 前端跨域代理服务器ProxyTable概述与配置

    概述 使用  vue-cli  工具生成一个  vue  项目: vue init webpack my-project-vue 在生成的项目结构里,会有一个  index.js  文件.在这个文件里 ...

  9. JAVA解决前端跨域问题。

    什么是跨域? 通俗来说,跨域按照我自己的想法来理解,是不同的域名之间的访问,就是跨域.不同浏览器,在对js文件进行解析是不同的,浏览器会默认阻止,所以 现在我来说下用java代码解决前端跨域问题. 用 ...

随机推荐

  1. Sqlmap基础指令

    安装: 下载地址:https://github.com/sqlmapproject/sqlmap 下载好后直接解压,并且加入环境变量,就可以直接在cmd调用 常用基础指令: -u 指定注入点 --db ...

  2. 【Mysql】了解Mysql中的启动参数和系统变量

    一.启动参数 在程序启动时指定的设置项也称之为启动选项(startup options),这些选项控制着程序启动后的行为. 1)在命令行上使用选项 启动服务器程序的命令行后边指定启动选项的通用格式就是 ...

  3. 剖析linux内核中的宏-----------offsetof

    offsetof用于计算TYPE结构体中MEMBER成员的偏移位置. #ifndef offsetof#define offsetof(TYPE, MEMBER) ((size_t) &((T ...

  4. Grafana中mysql作为数据源的配置方法

    需求 近期在使用python写一套模拟API请求的监控项目,考虑数据可视化这方面就采用grafana来呈现,下面来看看怎么弄. 数据源准备 首先安装好mysql,将监控的日志数据写入到mysql之中. ...

  5. yum总结

    yum企业案例          yum命令工具参数详解 yum install httpd 安装httpd软件包 yum search YUM搜索软件包 yum list httpd 显示指定程序包 ...

  6. 通过Socket实现TCP编程（十二）

    原文链接:https://www.cnblogs.com/hysum/p/7531529.html Socket通信 : TCP协议是面向对象连接.可靠的.有序的,以字节流的方式发送数据. 基于TCP ...

  7. WordCount-JAVA版

    WordCountMapper import java.io.IOException; import org.apache.hadoop.io.IntWritable; import org.apac ...

  8. C++ string 字符串函数详解

    运算符重载 + 和 +=:连接字符串 =:字符串赋值 >.>=.< 和 <=:字符串比较(例如a < b, aa < ab) ==.!=:比较字符串 << ...

  9. NeuHub图像垃圾分类api和百度图像识别api

    京东 NeuHub图像垃圾分类申请:http://neuhub.jd.com/gwtest/init/242 文档:https://aidoc.jd.com/image/garbageClassifi ...

  10. [LeetCode] 1123. Lowest Common Ancestor of Deepest Leaves 最深叶结点的最小公共父节点

    Given a rooted binary tree, return the lowest common ancestor of its deepest leaves. Recall that: Th ...