使用mui.ajax完成跨域请求

Posted 2020-09-09

一、代码

mui.ajax({

type:"post",

url: serverip + ‘/api/v1/requestSMS/?jsoncallback=?‘,

async:false,

data: {

mobile: mobile

},

dataType: "jsonp",

jsonp: "jsoncallback",

success: function(data, status, xhr){

console.log("success : "+ data)

return callback();

},

error: function(xhr, type, errorThrown){

console.log("error: " + type);

return callback("获取验证码失败：服务器错误！");

}

});

二、json和jsonp

jsonp的出现是因为浏览器有个同源策略，对js来说，它在执行时不能请求不同源的资源。什么是源呢，这里是指协议名(如http://)+主机名(api.flickr.com)+端口号(:80,http协议默认端口号是80,可省略),这三个组合在一起就是一个源，同源的话是指这3个必须和发起请求的网页的源必须一样。

因为js是不能请求不同源的资源，所以如果你的脚本不在这个源（http://api.flickr.com）的网页上，是没法请求的它的图片的。

但为什么jsonp可以？

那是因为同源策略有个例外，如果网页上通过<script src="不同源的地址"></script>,<img>以及<link>这样的标签来引用不同源的资源是可以的。

结合这个例外，一些（个）聪明的人就想到一个办法，

如果请求资源时，异源服务器能返回这样的脚本，请求异源资源的问题就得到解决：

fnName({theDataUWanted});

因为这样，浏览器得到这个脚本后会立即执行它，而这个函数实际上就是包含了你定义的回调函数的函数，而这个fnName就是jsoncallback参数的值，也就是jQuery自动替换的名字。

这个异源请求的完成，要求异源服务器也必须配合你的脚本才行，如果它不支持jsonp，那即使用jsonp也无法请求异源的资源。

三、json和jsonp的区别

如果服务器端执行代码：

message.setMsg(2, "message value", "content value");

return new ResponseEntity<Message>(message, HttpStatus.OK);

则客户端ajax的dataType设置为json和jsonp时，

success:function(data, status, xhr){

console.log("data:" + data + "data.message:" + data.message);

}

的打印结果分别为：

（1）json：

data：[object Object]

data.message：message value

 

（2）jsonp：

data： {"code":2,"message":"message value","content":"content value"}

data.message：undefined

四、jsonp原理

首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时，服务器先生成 json 数据。

然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）