前端跨域之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>()
{
,,,,,,,,,,,,,
};
var result = $"{cb}({JsonConvert.SerializeObject(data)})";
return Content(result);
}
}
}
前端跨域之Jsonp实现原理及.Net下Jsonp的实现的更多相关文章
- 前端跨域（二）：JSONP
上一篇文章 前端跨域(一):CORS 实现了跨域的一种解决方案,IE8 和其他浏览器分别通过 XDomainRequest 和 XHR 对象原生支持 CORS.这次我将补一补 Web 服务中也非常流行 ...
- 前端跨域问题相关知识详解（原生js和jquery两种方法实现jsonp跨域）
1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...
- 前端跨域解决方案: JSONP的通俗解说和实践
对于前端开发者而言,跨域是一个绕不开的话题.只有真正明白了各种方案的工作机制,才能针对性地进行跨域方案选型.本文将以探索者的视角,试图用最通俗的语言对一种"鼎鼎大名"的跨域解决方 ...
- 搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域:一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容: 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源请求(内部的引用,脚本script,图片img,fr ...
- 前端跨域（一）：CORS
上周做了一个移动端表单提交的页面,其中涉及到了跨域问题,想来也是惭愧,因为之前一直都没有遇到过这个问题,因此都没有深入探索过,只是知道有哪几种方式,这次终于借这个机会可以把遗留的知识点补一补了. 1. ...
- 用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面
用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面 1.什么是跨域以及产生原因 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地 ...
- 完美解决前端跨域之 easyXDM 的使用和解析
前端跨域问题在大型网站中是比较常见的问题.本文详细介绍了利用 easyXDM 解决前端跨域的原理细节和使用细节,具体使用时可以在文中代码实例的基础上扩展完成. 0.背景 因个别网络运营商存在 HTTP ...
- VUE006. 前端跨域代理服务器ProxyTable概述与配置
概述 使用 vue-cli 工具生成一个 vue 项目: vue init webpack my-project-vue 在生成的项目结构里,会有一个 index.js 文件.在这个文件里 ...
- JAVA解决前端跨域问题。
什么是跨域? 通俗来说,跨域按照我自己的想法来理解,是不同的域名之间的访问,就是跨域.不同浏览器,在对js文件进行解析是不同的,浏览器会默认阻止,所以 现在我来说下用java代码解决前端跨域问题. 用 ...
随机推荐
- Linux Workqueue【转】
转自:http://kernel.meizu.com/linux-workqueue.html 21 August 2016 Workqueue 是内核里面很重要的一个机制,特别是内核驱动,一般的 ...
- Windows Server2008 R2 服务器域名设置Https安全证书访问
域名支持Https访问设置 1.首先登陆域名申办公司的域名管理账号添加TXT域名解析信息 以新网域名公司为例:http://dcp.xinnet.com,输入域名:www.xxx.com和密码登录即可 ...
- luogu P1904 天际线
分析 都知道是从左向右扫描 可是该维护什么,扫描什么? 注意想想怎么输出, 实际上它要的输出就是图形的轮廓,即每个突出块的左上节点的x,y 所以说, 我们可以把扫描线扫进的楼房放入线段树,扫出的楼房删 ...
- E10【选款式】I don't like that style
核心句型 I don't like that style. 我不喜欢那个款式 场景对话 A:Look at those shoes. They're really nice. 瞧那双鞋.可真漂亮 B: ...
- Python类的使用总结
Python是一个面向对象的解释型语言,所以当然也有类的概念.在Python中,所有数据类型都可以视为对象,当然也可以自定义对象.自定义的对象数据类型就是面向对象中的类(Class)的概念.之前接触类 ...
- 学习-velocity
Velocity是什么? Velocity是一个基于java的模板引擎(template engine).它允许任何人仅仅简单的使用模板语言(template language)来引用由java代码 ...
- kubectl-trace 基于bpftrace 的kubernetes 集群性能分析工具
kubectl-trace 是一个kubectl 的插件,我们可以使用基于bpftrace 的编程能力,来分析系统的性能问题, 强大,灵活,后边安装试用下 参考架构 参考资料 https://gith ...
- GDB 调试C++
原来比较熟悉用gdb调试C程序,没有用过gdb调试C++程序,原理上没有什么区别.在形式上有一些区别,因为C++支持名字空间和class等机制,把函数的可见域做了隔离. 拿envoy的代码作个例子: ...
- ASP.NET开发实战——（三）第一个ASP.NET应用《MyBlog》
本文开始通过ASP.NET MVC创建一个博客应用,该应用是通过默认的MVC模板修改而来,所以创建的过程和代码都与默认模板一致,然后通过修改的方式将默认模板改为博客的主页,并添加博客列表.内容等页面. ...
- python的小数据池
一.什么是小数据池? 小数据池是一种缓存机制,也被称为驻留机制.各种编程语言中都有类似的东西(常量池.小数据池都是指得同一个内容). python自动将-5~256的整数.有一定规则的字符串.都放在一 ...