正文

前端跨域之jsonp实现原理及.net下jsonp的实现

小样儿哦  2022-02-07  403

关键词：

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原理及实现跨域方式

今天做页面时，后台给了个接口：https://a.a.com/a/a.json,我页面的上线地址是：http://b.b.com。显而易见，因为浏览器同源策略的限制，通过ajax无法无法取得json的数据。百度百科同源策略，它是由Netscape提出的一个著名的安全策略。... 查看详情

跨域jsonp原理及调用详细演示样例

上篇博客介绍了同源策略和跨域訪问概念，当中提到跨域经常使用的基本方式：JSONP和CORS。那这篇博客就介绍JSONP方式。 JSONP原理在同源策略下，在某个server下的页面是无法获取到该server以外的数据的，但im... 查看详情

jsonp原理及实现(代码片段)

...是利用script标签的src属性没有跨域限制来解决跨域。通过前端将回调函数传递到服务器端（将回调函数的名称放到这个请求的query参数里），然后由服务器端注入参数之后再返回，并将需要响应的数据放到回调函... 查看详情

jsonp原理解析

前言我工作以来接触的第一个项目就是前后端分离的，前端静态文件有自己独立域名，通过接口来获取数据进行渲染等操作。跨域的方法不需要多言，随便一搜，就有很多，但最常用不外乎jsonp和CORS。jsonp着重于前端，也算是前... 查看详情

jsonp原理，怎样实现跨域？

...JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。我们拿最近比较火的谍战片来打个比方，JSON是地下党们用来书写和交换情查看详情

vue--jsonp的诞生原理及应用实例

...数据变换的需求。但是，Ajax有一个缺点，就是他不允许跨域请求资源。如果我的代码在codepen上，我不能将我的数据放到codepen网站上，那么我只能放到我自己的服务器中，这样的话，就无法通过Ajax访问到这个数据了。解决：想... 查看详情

深入理解jsonp原理——前端面试

JSON和JSONP虽然只有一个字之差，但是它们俩是八竿子打不着的：JSON是一种数据交换格式，JSONP是非正式的跨域数据交换协议。为什么说JSONP是非正式的传输协议呢？因为它就是利用了<script>标签没有跨域限制这一“漏洞”来... 查看详情

原生javascript里jsonp的实现原理

ajax不能跨域，jsonp可以跨域跨域的核心思想：调用（拿到的接口），定义（jsonp核心处理器）分别是不同的script标签里面进行跨script取数据(只有get方式进行取数据) jsonp传进来的数据是{url:‘‘,data:{ ... 查看详情

jsonp跨域实现

...<script>节点的方法向不同域提交HTTP请求的方法。JSONP跨域的基本原理：由于script标签不受浏览器同源策略的影响，允许跨域引用资源。因此，通过动态创建script标签，然后利用src属性进行跨域。JSONP的优点：不受同源策略的... 查看详情

原生javascript里jsonp的实现原理

使用xhr2或jsonp实现跨域以及实现原理

...是浏览器的同源策略禁止了获取在xhr2服务器端支持跨域需要在响应头增加Access-Control-Allow-Origin:*//*代表任何域。也可以指定地址Access-Control-Allow-Methods: POST,GET//支持的方法查看详情

解决ajax跨域问题-jsonp原理解析

解决Ajax跨域问题-JSONP原理解析为什么会有跨域问题？-因为有同源策略同源策略是浏览器的一种安全策略，所谓同源指的是请求URL地址中的协议,域名和端口都相同，只要其中之一不相同就是跨域同源策略主要为了保证浏览器的安... 查看详情

jsonp的原理和实现

...sonp由回调函数和数据两部分组成。简单点说，jsonp是一种跨域通信的手段，它的原理其实很简单：首先是利用s 查看详情

jsonp实现跨域

原理：利用了src属性都可实现跨域的特点，创建新的script标签，src的值为要进行跨域访问的地址，这样就可以执行不同域的js代码了，这里在src进行赋值的时候传一个callback的函数名到服务器，服务器就会根据所传的callback名... 查看详情

[前端]jsonp

jsonp 之前清蒸了几只ajax螃蟹,味道不错,不过呢?螃蟹虽好,肉却太少哦!ajax出现,解决了页面不刷新的情况下与后台进行通讯与数据交换,但是有一个致命的缺陷,他是不能跨域的。跨域： <==慨念问题点左边总之端口号那... 查看详情

跨域cors原理及调用具体示例(代码片段)

...大，这个JSONP方式就歇菜了。那这篇博客就来介绍另一种跨域介绍方案—CORS。　　相对JSONP，CORS支持POST提交，并且实施起来灰常简单，CORS原理只需要向响应头header中查看详情

jsonp跨域uncaughtsyntaxerror:unexpectedtoken:解决方法

[jQuery]Ajax实现跨域访问JSONAjax跨域访问JSON环境：.net4.0+jQuery+JSON.net因为在跨域实现，所以这里新建网站，这个网站只需要Ashx文件publicvoidProcessRequest(HttpContextcontext){string strJson="[{"id":"100009","name":"mayixue","link":"www 查看详情

前端知识点总结（javascript篇）(代码片段)

...JavaScript字符串转化JSONP原理及优缺点XMLHttpRequest事件委托前端模块化（AMD和CommonJS的原理及异同，seajs和requirejs的异同和用法）sessionCookieseaJS的用法及原理，依赖加载的原理、初始化、实现等this问题模块化原理（作用域）JavaScript... 查看详情