JS - 跨域解决方案

跨域错误：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');