js同源问题与跨域

我们在用ajax进行数据请求的时候会存在这样的一个问题，当我们的客户端与请求的客户端不同源时，会禁止我们对其进行数据请求，包括不能获取其cookie信息，不能对其网页进行DOM操作，那么什么是不同源呢，就是当域名、端口、协议这三个有其中的一个不相同时就是不同源，同源策略也是一种安全策略，避免任何人都可以随意进行ajax请求，去获取一些隐私的信息。

所以当我们不同源又想进行数据请求的时候，我们就要进行跨域请求了，常用的跨域方法有两种，JSONP和CORS。

JSONP跨域：

function getData(data) {
            var script = document.querySelector('#jsonp');
            script.parentNode.removeChild(script);
            $('ul').html('');
            for (var i = 0; i < data.s.length; i++) {
                $('<li>' + data.s[i] + '</li>').appendTo('ul');
            }
        }

        function getList(wd) {
            var script = document.createElement('script');
            script.id = 'jsonp';
            script.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=getData&wd=' + wd;
            document.body.appendChild(script);
        }
        $('input').keyup(function() {
            var wd = $(this).val();
            if (wd === '') {
                $('ul').html('');
            } else {
                getList(wd);
            }
            getList(wd);
        })

 

因为script标签不存在同源限制，所以我们可以创建一个script标签，给这个script设置一个src地址，同时在这个src地址里声明一个回调函数的名字，当服务器收到我们发送过去的请求后，同意我们请求的话会将数据放入到以这个回调函数名字的函数里面返回过来，这样我们就完成了数据的请求。

缺点：JSONP跨域的问题就是我们只能进行get请求，而且服务器不作进一步处理的话是不知道到底是谁进行请求的。

优点：适配性好，支持IE浏览器，使用起来很简单。

CORS跨域：

$.get('http://www.test.com/cors.php', function (resp) {
      console.log(resp);
    });

------------------------服务器------------------------
<?php
    $person = array('name'=>'xiaoSun','age'=>30);
    header('Access-Control-Allow-Origin: *');
    echo json_encode($person);

 

基本跟ajax差不多，区别就是我们在发送网络请求的时候，在请求头加入一个origin字段，服务器在收到请求并允许访问后，在响应头中加上Access-Control-Allow-Origin:'请求头信息中的地址'，即可进行数据请求。

优点：可以进行get、post、head多种请求方式

缺点：IE浏览器不支持