js - 跨域

浏览数：26 / 时间：2015年06月09日

跨域错误：XMLHttpRequest cannot load ‘url‘. No ‘Access-Control-Allow-Origin‘ header is present on the requested resource. Origin ‘url‘ is therefore not allowed access.

何为跨域：协议、子域名、主域名、端口号，其中有任意一个不同时，都算作跨域。

原因：js出于安全方面的考虑，不允许跨域调用其他页面的对象。（同源策略限制）

解决方法：

1、代理：通过在同域名的web服务器端创建一个代理

　　自己的：http://www.abc.com

　　别人的：http://www.bcd.com

访问自己的服务器（http://www.abc.com/proxy-service.php）时，自己的服务器（http://www.abc.com/proxy-service.php）调用别人的服务（http://www.bcd.com/service.php），这样前端调用自己的服务器，就相当于调用别人的服务器。

2、JSONP：（jsonp跨域请求支持GET请求）

JSONP可用于解决主流浏览器的跨域数据访问的问题：

　　自己服务器js文件中加载跨域的js文件，跨域的js文件中返回JSONP，是可以避免跨域问题的。

//前端代码：
$.ajax({
    type:"GET",    //使用jsonp跨域请求只支持GET请求
    url:"跨域地址",
    dataType:"jsonp",
    jsonp:"callback",
    success:function(){
        if(data.sueccess){
            //解析jsonp
        }else{
        }
    },
    error:function(jqXHR){
        console.log("发生错误："+jqXHR.status);
    }
});

//服务器代码（php）：
//返回值需要调整：json返回值前要加一个标头（前端传递过来的jsonp的值），json字符串需要用小括号包括。
$jsonp=$_GET["callback"];
$return=$jsonp.‘({"success":,false,"msg":"没有找到。"})‘;

3、XHR2：

• HTML5提供的XMLHttpRequest Level2已经实现了跨域访问以及其他的一些新功能

• IE10以下的版本都不支持

• 在服务器端做一些小小的修改即可：（php）

　　header(‘Access-Control-Allow-Origin:*‘);

　　header(‘Access-Control-Allow-Methods:POST,GET‘);

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

js - 跨域