Ajax跨域调用Restful接口 JSONP和CORS两种解决方案详解

Ajax跨域调用Restful接口 JSONP和CORS两种解决方案详解

最近工作中遇到了一个需求,需要Ajax跨域调取Restful接口获取数据。因为本次需求仅用到GET请求,经过几番波折,最终采用JSONP方式(仅支持GET方式请求)实现。但是本篇文章将顺带介绍另一种更为通用的跨域解决方案CORS,因为CORS支持更多的请求方式(GET,POST,PUT,DELETE等)。

一. JSONP方式
前端代码:

var patientInfoURL = 'http://10.1.8.82:8332/soap/GetPatInfo?
citycardno=0000997144446894&id=32010600000002012';
$.ajax({
     type:'get',
     url: patientInfoURL ,
     dataType:'jsonp',
     //jsonp:'callback',//默认就是callback,可以不写
     //jsonpCallback:"successCallback",//此处定义请求url中callback参数后的值,不写则jQuery会自动生成一个字符串
     success:function(data){
        console.log(data);
     },
     error:function(XMLHttpRequest, textStatus, errorThrown){
          alert(XMLHttpRequest.status);
          alert(XMLHttpRequest.readyState);
          alert(textStatus);
     }
 });

以上代码说明:
Ajax跨域请求,浏览器会在请求的url后面自动加上两个param,一个key=callback,另一个key=_。其中第一个key的值callback可以通过jsonp:’callback’来改变,默认是callback。第二个key用途不清楚,不影响使用,有兴趣的朋友可以去研究,笔者在此不做介绍。具体可以看以下浏览器HTTP请求截图。

  • 自定义jsonp的callback名字(即带有jsonpCallback:”successCallback”)

可以看到callback的值是successCallback

  • 未自定义jsonp的callback名字(即不带有jsonpCallback:”successCallback”)
    可以看到callback的值是jQuery随机生成的一串字符串

笔者遇到的问题
刚开始用的jQuery版本是jquery-1.2.3.js,比较老的版本,结果是就算加了自定义的jsonpCallback,url参数中的callback值依然是jQuery随机生成的字符串。具体原因不得而知。后来换用了最新版的jQuery,jquery-3.3.1.js,问题随即得到了解决。

dataType:’jsonp’
如果Ajax涉及到跨域,则dataType一定要写‘jsonp’。
Jsonp服务器返回的数据格式:回调函数名+(+json+)
例如:回调函数名字是successCallback,json为{“name”:”hello”},
则Jsonp返回的数据格式successCallback({“name”:”hello”}); 所以后台返回数据的数据格式也要相应改变。
其中,回调函数名就是以上两幅截图中,callback对应的值(即 successCallback 或者 jQuery32108683094116218273_1536130976427),jQuery随机生成的字符串每次请求都不一样。

拓展:
关于Ajax中dataType的一些说明
1.释义:

预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如XML MIME类型就被识别为XML。
在1.4中,JSON就会生成一个JavaScript对象,而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。

2.可用值:

“xml”: 返回 XML 文档,可用 jQuery 处理。

“html”: 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。

“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了”cache”参数。”’注意:”’在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)

“json”: 返回 JSON 数据 。

“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时,如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

“text”: 返回纯文本字符串

关于jsonp和jsonpcallback的详细使用说明,读者可以点击此处查看。

后端代码:

Response.ContentType="text/html; charset=utf-8";
String callback = Request.QueryString["callback"].ToString();
Response.Write(callback + "{ \"success\": [{ \"id\": 1, \"title\": \"title 1\" }, { \"id\": 2, \"title\": \"title 2\" }, { \"id\": 3, \"title\": \"title 3\"}] }");

通过获取前端请求url中param的key为callback的值来作为回调函数名。

二. CORS方式
介绍:

CROS是现在主流解决跨域问题的方案,未来估计也是趋势。

Cross-Origin Resource Sharing (CORS) 是W3c工作草案,它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方,从而决定请求或响应成功与否。

前端代码:

var patientInfoURL = 'http://10.1.8.82:8332/soap/GetPatInfo?
citycardno=0000997144446894&id=32010600000002012';
$.ajax({
    type:'get',
    url: patientInfoURL ,
    dataType:'json',
    success:function(data){
        console.log(data);
    },
    error:function(XMLHttpRequest, textStatus, errorThrown){
        alert(XMLHttpRequest.status);
        alert(XMLHttpRequest.readyState);
        alert(textStatus);
    }
});

细心的朋友可以注意到,CORS方式的Ajax跨域请求和普通的非跨域Ajax请求看上去没什么区别,事实也确实如此。这也是CORS方式的有点所在。在程序员看来,所做的工作和非跨域并无区别,主要的区别则是在后端代码。

后端代码:

// 跨域配置
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Max-Age", "3600"); // 保持跨域Ajax时的Cookie
response.setHeader("Access-Control-Allow-Headers", "x-auth-token, x-requested-with,Authorization,Origin, Accept, Content-Type,x-xsrf-token");

关于CORS更详细的讲解,请点击此处查看。

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值