跨域问题解决方法

跨域?他是浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。所谓同源是指:域名、协议、端口均相同。

解决

方式一:script标签实现跨域(jsonp)

原理:利用标签具有可跨域的特性,可实现跨域访问接口,需要后端的支持。

var messagetow = function(data){

    alert(data);   //后端返回的json格式的数据

};

var url = "http://192.168.31.137/train/test/jsonpthree?callback=messagetow";

var script = document.createElement('script');

script.setAttribute('src', url);

document.getElementsByTagName('head')[0].appendChild(script);

服务器在收到请求后,解析参数,计算返还数据,输出messagetow(data)字符串。

缺点:只能发送get请求,无法访问服务器的响应文本(单向请求),即只能获取数据不能改数据。

方式二:ajax的jsonp跨域(jsonp)

通过ajax请求不同域的实现,底层不是靠XmlHttpRequest而是script,所以不要被这个方法给迷惑了。

在ajax请求中类型如果是type是get post,其实内部都只会用get,因为其跨域的原理就是用的动态加载script的src,所以我们只能把参数通过url的方式传递

$.ajax({

url:' http://192.168.31.137/train/test/jsonpthree',    //不同的域

type: 'GET',    //jsonp模式只有GET是合法的

dataType: 'jsonp',    //数据类型

jsonp: 'callback',     //指定回调函数名,与服务器端接收的一致,并回传回来

jsonpCallback:' messagetow ',

success:function(data){    

    alert(data.price);

},

error:funciton(){

}

})

其实jquery内部会转化成

http://192.168.31.137/train/test/jsonpthree?callback=messagetow

然后动态加载http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron">

http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron">

http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron">

http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron">

方式三:CORS

Cross-Origin Resource Sharing(CORS)跨域资源共享是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略,确保安全的跨域数据传输。现代浏览器使用CORS在API容器如XMLHttpRequest来减少HTTP请求的风险来源。与 JSONP 不同,CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。服务器一般需要增加如下响应头的一种或几种:

Access-Control-Allow-Origin:*

Access-Control-Allow-Methods:POST, GET, OPTIONS

Access-Control-Allow-Headers:X-PINGOTHER, Content-Type

Access-Control-Max-Age:86400

跨域请求默认不会携带Cookie信息,如果需要携带,请配置下述参数:

"Access-Control-Allow-Credentials":true//Ajax设置

"withCredentials":true

方式四:window.name+iframe

​window.name通过在iframe(一般动态创建i)中加载跨域HTML文件来起作用。然后,HTML文件将传递给请求者的字符串内容赋值给window.name。然后,请求者可以检索window.name值作为响应。

iframe标签的跨域能力;

window.name属性值在文档刷新后依旧存在的能力(且最大允许2M左右)。

每个iframe都有包裹它的window,而这个window是top window的子窗口。contentWindow属性返回