Ajax跨域及mui.ajax跨域请求小坑

同源策略规定，浏览器的ajax只能访问跟它的HTML页面同源（相同域名或IP）的资源。一般有两种解决方式：
（1）服务器端解决方案 ：
在服务器端的filter或者servlet里面添加

response.setHeader("Access-Control-Allow-Origin", "*");

“Access-Control-Allow-Origin”表示允许跨域访问，“*”表示允许所有来源进行跨域访问，这里也可以替换为特定的域名或ip。

（2）客户端解决方案：

$(function($){
var url = 'http://www.abc.com/list';
$.ajax(url, {
data: {
'name': 'xiaoming',
'time': '2018-12-12'
},
dataType: 'jsonp',
crossDomain: true,
success: function(data) {
if(data && data.resultcode == '200'){
console.log(data.result.today);
}
}
});
从前端和后端两个角度分析jsonp跨域访问（完整实例）参考
https://blog.csdn.net/zhoucheng05_13/article/details/78694766

对于mui.ajax的代码调试时候遇到了小坑

kuaixun.addEventListener('tap',function(){
mui.ajax('http://www.bbb.com/api/live/list',{
type:'get',
data:{},
dataType:'jsonp',
crossDomain: true,
timeout:100000,
success:function(data){
console.log(data);

                      main=document.getElementById('main');
                      main.innerHTML=data;
                      kuaixun.className='mui-btn mui-btn-success';
                      surgar.className='mui-btn';
                  },
                  error:function(xhr,type,errorThrown){
                      //异常处理；
                      console.log(type);
                  }                                           
              })

      });

浏览器不能跨域，真机手机是可以正常跨域的，把控制台 调到手机 就能正常看到跨域后的结果了报出这种错误 都是在 “边改边看控制台”里显示的。

关于跨域还有下面的这篇解析得比较通俗，做个记录：
(转载于)https://blog.51cto.com/idzhaoxiao/1914024
一、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 函数里。（动态执行回调函数）

转载于:https://blog.51cto.com/13238147/2126748