jsonp跨域

Posted 2020-10-18 Mr.yang.localhost

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jsonp跨域相关的知识，希望对你有一定的参考价值。

js调用问题

最近用js调用另一个站点时报错了，报错信息：No \'Access-Control-Allow-Origin\' header is present on the requested resource。js跨域问题。

后台C#接口

使用默认的回调函数：

    public class DemoController : ApiController
    {
        [Route("~/demo")]
        [HttpGet]
        public HttpResponseMessage Demo(int OrderId) //C#传参数不区分大小写
        {
            HttpResponseMessage response = Request.CreateResponse();
            response.StatusCode = HttpStatusCode.OK;
            response.Content = new StringContent(String.Format("callbackFun({0})", (new { IsSuccess = "-1000", Msg = "resp.Msg" }).ToJson()));
            return response;
        }
    }

前台js调用示例：(回调函数和后台指定一致，可以不申明function callbackFun(data)函数，默认success函数会被调用；如果申明了callbackFun函数，会先调callbackFun，然后再调success函数)

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
function b_click(){
    $.ajax({
        type:"GET",
        async:false,
        dataType: \'jsonp\', //跨域调用
    　　jsonpCallback: "callbackFun",  //指定回调函数名称
        data: {"orderId":4811},
        //timeout: 5000, //超时设置
        //contentType: "application/json;utf-8",
        url:"http://ab.test.com/demo",
        success:function(result){
            console.log("success");
            console.log(result);
            alert(result.Msg);
        },
        error:function(result){
            console.log("fail");
            console.log(result);
            alert(result.Msg);
        }
    });
    
    //function callbackFun(data){
        //console.log("call");
    //}
}
</script>
</head>
<body data-spy="scroll" data-target=".navbar-example">
 <input type="button" value="click me!" onclick="b_click();" />
</body>
</html>

浏览器看js请求链接：http://ab.test.com/demo?callback=callbackFun&orderId=4811

可以看出：如果不指定回调参数名称，默认是callback

指定回调函数名：

服务端接口：

    public class DemoController : ApiController
    {
        [Route("~/demo")]
        [HttpGet]
        public HttpResponseMessage DemoCheck(int OrderId, String callbackMethod)
        {
            HttpResponseMessage response = Request.CreateResponse();
            response.StatusCode = HttpStatusCode.OK;
            response.Content = new StringContent(String.Format(callbackMethod + "({0})", (new { IsSuccess = "-1000", Msg = "resp.Msg" }).ToJson()));
            return response;
        }
    }

接口返回结果：

指定回调参数名和值：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
function b_click(){
    $.ajax({
        type:"POST",
        async:false,
        dataType: \'jsonp\',
　　　　 //jsonp的值自定义,如果使用callbackMethod,那么服务器端,要返回一个callbackMethod的值对应的对象.
        jsonp: \'callbackMethod\',
        jsonpCallback: "callbackFun",  //指定回调函数名称
        data: {"orderId":4811},
        //timeout: 5000,
        //contentType: "application/json;utf-8",
        url:"http://ab.test.com/demo",
        success:function(result){
            console.log("success");
            console.log(result);
            alert(result.Msg);
        },
        error:function(result){
            console.log("fail");
            console.log(result);
            alert(result.Msg);
        }
    });
}
</script>
</head>
<body data-spy="scroll" data-target=".navbar-example">
 <input type="button" value="click me!" onclick="b_click();" />
</body>
</html>

请求url：http://ab.test.com/demo?callbackMethod=callbackFun&orderId=4811

以上是关于jsonp跨域的主要内容，如果未能解决你的问题，请参考以下文章

jsonp 方式处理跨域前后端代码如何配合？

前端 - jsonp 跨域ajax

jsonp实现数据跨域请求

ajax之jsonp跨域请求

JS的jsonp是什么？5分钟学会jsonp跨域请求

JSONP