JavaScript踩坑之路-jsonp-ajax跨域请求数据-跳到error，不到success(已解决)

最近在项目中遇到了和不同域名下的服务器进行数据交换，由于同源策略的影响，因此会出现跨域，跨域的限制如下：

1.) Cookie、LocalStorage 和 IndexDB 无法读取
2.) DOM 和 Js对象无法获得
3.) AJAX 请求不能发送

前端跨域的解决方案主要有以下几种：

1、jsonp

其实就是利用img、script的跨域特性实现ajax请求，但是只能实现get请求

2、document.domain+iframe

适用于主域名相同，子域名不同的情况，例如 a.domain.com b.domain.com

3、location.hash+iframe

通过中介页面实现页面间的通信

4、window.name+iframe

name在不同的页面加载后还可以存在，并且name可以达到（2M）

5、postMessage

来自于HTML5 XMLHTTPRequest 的API，可以支持Windows跨域操作

• 页面与其他窗口的数据传递；
• 多窗口之间的消息传递
• 页面与嵌套页面的iframe信息传递
• 跨域数据传递

6、CORS（Cross Origin Resource Sharing）

服务器端设置Access-Control-Allow-Origin，如果要携带cookie信息需要前后端设置Access-Control-Allow-Origin

xhr.withCredential = true;

7、Nginx代理服务器

使用Nginx服务器转发domain1和domain2的数据请求

 

遇到的问题，就是利用jQuery的ajax请求jsonp请求数据，在network下能看到数据，但是JavaScript里面会跳转到error方法，经过网上收集资料，发现问题来源于jsonp的callback函数，因此需要在后端需要设置对应的callback函数。

前端代码 ：

$.ajax({
    type: 'get',
    url: baseUrl + method + finishStock,
    async: false,
    dataType: 'jsonp',
    jsonp: 'callback',
    jsonpCallback: "successCallback",
    //contentType: "application/json;charset=utf-8",
    success: function (data) {
        console.log(data);
    },
    error: function (data) {
        console.log(data);
    }
});

后端代码：

        public async Task Get(string businessType)
        {
            var callback = Request.Query["callback"];

            ViewResult test = await Notice(businessType);
            List Notice = (List)test.Model;
            var result = $"{callback}({ JsonConvert.SerializeObject(Notice)})";
            return Content(result);  //返回数据类似为text/plain
            //return Json(Notice);   //json数据返回不成功
        }

修改前：

修改后：

成功访问到数据

 

 

参考链接，感谢大佬

前端常见跨域解决方案

前端跨域之Jsonp实现原理及.Net下Jsonp的实现