ajax的跨域问题

这是一个简单的ajax 异步发送请求获取数据

 var http =new XMLHttpRequest();
    http.open("get","txt/ajax.txt",true);
    http.send();
    function showdata(callback){
    http.onreadystatechange =function(){
        if(http.readyState ==4 && http.status ==200){
         callback (http.response);
        }
   }
 }
    showdata (function(data){
        console.log(data);
    })

跨域的条件：

协议+域名+端口相同，就不算跨域，否则跨域

http://192.168.168.1:80/aaa

http://192.168.168.1:80/bbb

http://192.168.168.1/ccc //默认端口是80

以上都不是跨域

只要协议、端口、域名之中有一个不同那么就算是跨域。

跨域的方法：

1.JSONP 通过传递回调函数来返回数据，给后台传递回调函数。

JSONP的实现原理，我们将要请求的数据的地址变成一个callback函数，通过script标签去加载这个文件，这时返回这个函数callback()，里面就是我们想要请求的数据。

<script src="http://127.0.0.1:8080/0616/user.php?callback=dosome"></script>
    <script>
        function dosome(data) {
            console.log(data);
        }
    </script>

jsonp的缺点：

1、JSONP是一种非官方的方法，而且这种方法只支持GET方法，不如POST方法安全。（从实现机制就可明白）。

2、JSONP的实现需要服务器配合，如果是访问的是第三方的服务器，我们没有修改服务器的权限，那么这种方式是不可行的。

2.cross跨域
前台无需任何设置，在后台被请求的PHP文件中，写入一条header。

header(“Access-Control-Allow-Origin:*”);

— 表示允许哪些域名请求这个PHP文件，*表示所有域名都允许;

// 指定允许其他域名访问 
response.setHeader("Access-Control-Allow-Origin", "*");
// 响应类型 
response.setHeader("Access-Control-Allow-Methods", "POST");
// 响应头设置 
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");

var http = new XMLHttpRequest();
    http.open("post", "http://127.0.0.1:8080/0616/insert.php");
    http.send();
    http.onreadystatechange = function () {
        if (http.readyState == 4 && http.status == 200) {
            console.log(http.response);
        }
    }

如果需要指定某域名才允许跨域访问，只需把Access-Control-Allow-Origin:*改为Access-Control-Allow-Origin:允许的域名

例如：response.setHeader(“Access-Control-Allow-Origin”,”http://www.baidu.com”);

缺点：

1、此种解决跨域方案，需要浏览器支持H5，因为这是HTML5解决跨域的方式，如果产品面向的是PC端，这种方式可能就不是一个好的解决方案，如果面向的是手机端，此方法不为一个简单、粗暴的好方式。
2.设置 * 存在安全隐患。