前端跨域访问后端数据的方法

参考链接：https://mp.weixin.qq.com/s/4G_27oRLSMMYBFvtYZgqcg

一、什么是跨域

当两个域名的协议、子域名、主域名、端口号中有任意一个不相同的时候，两者之间的请求便存在跨域。

1、什么是同源策略及其限制内容

　　同源策略是一种约定，它是浏览器最核心也是最基本的安全功能。如果缺少了同源策略，浏览器很容易遭受XSS、CSRF等攻击。所谓同源是指\'协议+域名(子域名、主域名)+端口号\'三者相同，即便两个不同域名指向同一个IP，也不属于同源。

2、常见的跨域场景

特别说明：

　　HTML标签中img、link、script的这三个标签允许跨域加载资源

注：

1.请求跨域了，那么请求有没有发出去？

　　跨域并不是请求发不出，请求能正常发送并且服务器也能正常接收和返回结果，只不过结果被浏览器拦截了。

2.为什么表单方式可以发起跨域请求而Ajax不能？

　　归根结底，跨域是为了阻止用户读取到另一个域名下的内容。Ajax可以获取响应，浏览器认为不安全拦截了响应。但是表单并不会获取新的内容，所以可以发起跨域请求。同时也说明了跨域并不能完全阻止CSRF，因为请求已经发出去了。

二、跨域解决方案

1、JSONP

　　原理：利用script标签没有跨域限制的漏洞，网页可以得到其他动态来源的JSON数据。此方式需要目标服务器支持才能实现。

1.1 Ajax与JSONP对比

　　原则上两者都是客户端向服务端发送请求并获取服务端返回的数据。但是Ajax属于同源策略，JSONP属于非同源策略。

1.2 JSONP的优缺点

　　优点：JSONP的兼容性好，能解决大部分主流浏览器的跨域数据访问的问题。

　　缺点：JSONP仅仅支持get请求，对数据安全性无法保障

1.3 Jquery中ajax通过jsonp获取跨域数据示例
　　请求方JS代码：

$(function () {
    $.ajax({
        url:\'http://test.cache.com/index/checkjsonp.html\',
        dataType:\'jsonp\',
        type:\'get\',
        jsonpCallback:\'checkCallback\', //自定义传递给服务器的函数名，而不是使用jQuery自动生成的，可省略
        jsonp:"callback",
        success:function (data) {
            console.log(data)
        },
        error:function () {
            alert(\'error\')
        }
    })
});

　跨域服务器返回PHP代码：

    public function checkJsonp()
    {
        echo "checkCallback(".json_encode(array(\'success\'=>1)).")";
    }

返回结果：

2、HTTP访问控制（CORS）

　2.1 原理：　　

　 CORS需要浏览器和服务器同时支持，IE8和9需要通过XDomainRequest来实现，存在一定的兼容性问题。

　　　浏览器会自动的进行CORS通信，实现CORS通信的关键在于服务器。只要服务器实现了CORS，也就实现了跨域

　2.2 实现：

　　　　服务端设置 Access-Control-Allow-Origin 就可以开启CORS。该属性表示那些域名可以访问该网站，如果设置成通配符则表示所有网站均可访问

　2.3 示例：

　　JS代码：

$(function () {
    $.ajax({
        url:\'http://test.cache.com/index/checkjsonp.html\',
        dataType:\'json\',
        type:\'get\',
        success:function (data) {
            console.log(data)
        },
        error:function () {
            alert(\'error\')
        }
    })
});

　PHP代码：

    public function checkJsonp()
    {
        header("Access-Control-Allow-Origin:http://initial.think6.com");
        header(\'Access-Control-Allow-Methods:OPTIONS, GET, POST\'); // 允许option，get，post请求
        header(\'Access-Control-Allow-Headers:x-requested-with\'); // 允许x-requested-with请求头
        echo json_encode(array(\'success\'=>1));
    }