mvc中使用jsonp进行跨域请求详细说明

在web开发中,如果你要在不同域下进行数据异步请求,会出现一个No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”的错误提示。
该提示信息说明,跨域请求是违反了“同源策略”的。
但是在开发中又难免会遇到跨域请求的需求,所以前辈们也是留下了跨域请求数据的方法jsonp跨域请求。

我们以最为典型的Jquery做例子,后台用的asp.net mvc。
我们先构造一个action的返回对象,用于返回jsonp数据

#region JsonResult
    public class JsonpResult<T> : ActionResult
    {
        public T Obj { get; set; }
        public string CallbackName { get; set; }

        public JsonpResult(T obj, string callback)
        {
            this.Obj = obj;
            this.CallbackName = callback;
        }

        public override void ExecuteResult(ControllerContext context)
        {
            var js = new System.Web.Script.Serialization.JavaScriptSerializer();
            var jsonp = this.CallbackName + "(" + js.Serialize(this.Obj) + ")";

            context.HttpContext.Response.ContentType = "application/json";
            context.HttpContext.Response.Write(jsonp);
        }
    }

    #endregion

写一个供前台调用的action ,callback参数是必须的一个参数

public ActionResult AjaxJsonp(string s, string f,string callback)
{
    string result=s+‘-‘+f;
    return new JsonpResult<object>(new { result = result }, callback);
}

然后我们在前台用Ajax跨域调用该方法(如果是在本地测试,在不同的端口号下即可)

$.ajax({
    type: "GET",
    url: "AjaxJsonp?callback=?",
    data: { s: ‘‘,f:‘‘},
    cache: false,
    error: function () {
        alert("程序出错,请联系管理员.");
    },
    dataType: "jsonp",
    jsonp: ‘callback‘,
    success: function (result) {
        if (result) {
            //返回对象处理
        }
    }
});

介绍Ajax jsonp跨域请求的参数说明

    • type:请求的类型(get/post),这里需要注意的是,跨域请求只能是Get方式请求,这是因为限制于实现跨域的原理,但你会发现,将type写为post同样能执行,这是为什么呢?
      在仔细查看监控的请求方式,其实还是GET方式,这就说明Jquery在内部已经做了处理,所以跨域请求只能是get请求,请求数据量是很有限的。
    • url:url后面的callback=?是必须的,Jquery会将?号生成一个随机的名字,用于回调
    • data:传递的参数
    • cache:是否开启缓存,如果请求的数据是不变的,那么可以开启缓存提高效率
    • dataType:一定是jsonp
    • jsonp:callback名一般使用默认callback,可自行修改
    • error:请求出错时执行
    • success:请求成功回调并返回结果数据
时间: 2024-12-29 12:27:50

mvc中使用jsonp进行跨域请求详细说明的相关文章

Vue中使用jsonp进行跨域请求

Vue-resouse中可以通过this.$http.jsonp的方式直接使用jsonp进行跨域请求.官方在推荐使用axios之后,axios并没有集成jsonp.但在axios的github中(https://github.com/mzabriskie/axios/blob/master/COOKBOOK.md#jsonp),可以直接安装jsonp并使用他来坐跨域请求. <script> var jsonp = require('jsonp'); export default { data(

在vue中使用axios实现跨域请求并且设置返回的数据的格式是json格式,不是jsonp格式

在vue中使用axios实现跨域请求 需求分析:在项目中需要抓取qq音乐的歌曲列表的数据,由于要请求数据的地址url=https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg.从qq音乐的官网上可以看到该请求的请求头中的referer中的域名是y.qq.com(发送请求页面的域名),而host的域名是c.y.qq.com(被请求页面的域名),由于两者不一样,所以不能通过前端直接发送请求给qq服务器去拿数据.这时候需要服务器做一个代理

PHP AJAX JSONP实现跨域请求使用实例

在之前我写过“php返回json数据简单实例”,“php返回json数据中文显示的问题”和“在PHP语言中使用JSON和将json还原成数组”.有兴趣的童鞋可以看看 今天我写的是PHP AJAX JSONP使用的实例.不清楚jsonp是什么的请自己搜索 实例1 test.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>test</title

js中ajax如何解决跨域请求

js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操作. 跨域指的协议.域名.端口 有一个不同的情况下都是跨域 例:在本站点请求外站的数据是不允许的 //在本站点请求外站点的资源是不允许的 $(function () { $.ajax({ url: "http://127.0.0.1:14847/Web/jsonp.js", success

Nginx反向代理、CORS、JSONP等跨域请求解决方法总结

由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为域名地址(在跨域问题上,域仅仅是通过“ url的首部 ”来识别而不会去尝试判断相同的IP地址对应着两个域或者两个域是否同属同一个IP),之中任意服务端旗下的客户端发起请求其它服务端资源的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源. 但很多时候我们却又不得不

用JSONP方式跨域请求

JQUERY 中封装的JSONP请求方法 1.index.html 中的javascript $(function(){ $.ajax({   type: "GET",   async:false,   url: "http://www.vm.com:81/index.php", //跨域请求的地址   data:{'birt':2016},   dataType: 'jsonp',   jsonp: 'jsoncallback',   success: funct

项目中经常遇到的跨域请求的几种方法

什么是跨域 JSONP proxy代理 cors xdr 关于跨域无非就是jsonp和iframe,随着跨域请求的应用越来越多,W3C提供了跨域请求的标准方案(Cross-Origin Resource Sharing).IE8.Firefox 3.5 及其以后的版本.Chrome浏览器.Safari 4 等已经实现了 Cross-Origin Resource Sharing 规范,实现了跨域请求.在服务器响应客户端的时候,带上Access-Control-Allow-Origin头信息. 如

利用jsonp实现跨域请求

同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行.如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问. 由于同源策略,我们在使用ajax请求资源时不能跨域请求,也就是说必须是同一个域名,协议,端口.

来说说SpringMVC + JSONP的跨域请求

先来说说场景,JSON,这货大家应该都懂,不懂的请自动面壁思过,那么什么是JSONP,不是JSON放了个P就叫JSONP,而是JSON with Padding,在进行跨域请求的时候需要的数据,什么是跨域,打个比方:在user.weixin.com下的某个页面下,用户服务需要调用订单服务,请求order.weixin.com,那么在这两个二级域名下,请求是互斥的,如果请求就会报错. 先来看看本域下的请求,同域名下是可以获取到json数据的 那么如果换一个域名呢?可以看到请求被拒绝了,说到底这还是