什么是跨域

什么是跨域呢？简单来说就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或者c.a.com域名下的对象。

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。
www.abc.com/index.html --> www.abc.com/service.php（非跨域）
www.abc.com/index.html --> www.efg.com/service.php（跨域 主域名不同）
www.abc.com/index.html --> bbs.abc.com/service.php（跨域 子域名不同）
www.abc.com/index.html --> www.abc.com: 81/service. php（跨域 端口号不同）
www.abc.com/index.html --> https:/www.abc.com/service.php（跨域 协议不同）

解决方法

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

北京服务器（域名 www.beijing.com ）
上海服务器（域名 www.shanghai.com ）

在北京的web服务器的后台 www.beijing.com/proxy-shanghaiservice.php 来调用上海服务器 www.shanghai. com/service. php 的服务，然后再把响应结果返回给前端，这样前端调用北京同域名的服务就和调用上海的服务效果相同了。

2.JSONP

JSONP可用于解决主流浏览器的跨域数据访问的问题。但是有个缺陷，只能解决get请求，不能解决post请求。
主要方法是：动态创建script标签并让src指向后端，后端返回脚本内容，触发浏览器立即加载并执行相应js代码，从而实现前后端无刷新数据交互。
就是前端提供函数的定义和script，后端提供实参和调用语句。

• 请求方：创建script,src指向响应方，同时传一个查询参数?callback = xxx(xxx是请求方的一个函数)
• 响应方：根据查询参数callback获得xxx，传入数据，并返回一条调用xxx函数的js命令
  xxx这个函数名由 字符串+随机数 组成

<script>
    var script = document.createElement('script');
    //script.type = 'text/javascript';
    script.src = 'http://localhost:8080/json/?callback=handleData';
    document.body.appendChild(script);
    // 回调执行函数
    function handleData(res) {
        data = JSON.stringify(res)
        console.log(data);
    }
</script>

3.CORS

HTML5提供的XMLHttpRequest open方法

使用XMLHttpRequest对象。有个open方法，传入绝对地址就行了。但是这个不能设置自定义头部，不能接受和发送cookie，使用getAllRequestHeaders方法返回空字符串。

preflighted requests

这个支持自定义头部，请求时候：
Origin +url
Access-Control-Allow-Methods + 方法
Access-Control-Allow-Headers + 头部
服务器上
header('Access-Control-Allow-Origin: + url ')
header('Access-Control-Allow-Methods: + 方法 ')
header('Access-Control-Allow-Headers: + 允许头部 ')
header('Access-Control-Allow-Max-Age: + 时间')这个请求能缓存多久，秒为单位。

全部支持在服务器端加上下面代码即可
header('Access-Control-Allow-Origin:*
header('Access-Control-Allow-Methods: POST, GET')

• IE10以下的版本都不支持