前端跨域的解决方式

前端与服务端数据交互时，涉及到跨域的一些问题。JavaScript出于安全的考虑，禁止了跨域调用其余页面的对象，也即同源策略限制了一个源（origin）中加载文本或脚本与来自其它源（origin）中资源的交互方式。

什么是跨域？

若是两个页面拥有相同的协议（protocol），端口（若是指定），和主机，那么这两个页面就属于同一个源（origin），JavaScript容许这种同源页面的数据互相通讯。

带来的麻烦，以及解决方案

同源策略让JavaScript或Cookie只能访问同域下的内容，但在实际开发项目时会不可避免的要进行跨域操做，所以给前端带来了麻烦，跨域能力也算是前端工程师的基本功之一，对于端口和协议的不一样，只能经过后台来解决了，下面主要说说主机不一样状况实现跨域。

神器JSONP

JSONP是比较流行的跨域处理方式，网络上的定义：JSONP是资料格式JSON的一种使用模式，可让网页从别的网域要资料，原理是HTML的script标签能够加载并执行其余域JS文件。站点B把要提供的数据做为参数传给一个站点A定义的全局函数，站点A引用这个文件就能够跨域获取数据了，A站还能够把少许参数放在script标签的src里提交给B站。外链JS这种方案只支持GET，受IE下url长度不能超过2083个字节的限制和出于安全考虑，通常不用来提交数据。

JSONP实际上就是被包含在一个回调函数中的JSON，例如callback({"name":"zhangsan"});

所以咱们能够知道JSONP有两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据，须要注意的是这个回调函数必定要让后端开发人员处理包裹，不然只能获取json数据，不能使用。

在js中，不能够直接用XMLHttpRequest请求不一样域上的数据。但咱们知道在页面上引入不一样域上的js脚本文件是被容许的，JSONP就正是利用这个特性来实现的，例如：

<script src="http://jd.com/data.php?callback=dosomething"></script>

<script type="text/javascript">

function dosomething(jsondata){

　　console.log(jsondata);

}

</script>

js文件载入成功后，会执行咱们在url参数中指定的函数（dosomething），而且会把咱们须要的json数据（jsondata）做为参数传入。因此再次强调jsonp是须要服务器端的页面进行相应的配合的。

<?php

　　$callback=$_GET['callback'];//获得回调函数名

　　$data={'name':'张三',sex:'男',age:'15'};//要返回的数据

　　echo $callback.'('.json_encode($data).')';//输出

?>

最终输出结果为：dosomething({'name':'张三',sex:'男',age:'15'});

若是你使用jquery或者zepto，那么经过它封装的方法就能很方便的来进行JSONP操做了。

JSONP的优势是：

①：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制

②：它的兼容性更好，在老版本的浏览器中能够运行，不须要XMLHttpRequest或ActiveX的支持

③：它在请求完毕后能够经过调用callback的方式回传结果，方便调用。

JSONP的缺点则是：

①：它只支持GET请求而不支持POST等其余类型的HTTTP请求，不能提交大量数据

②：它只支持跨域HTTP请求这总状况，不能解决不一样域的两个页面之间如何进行JavaScript调用的问题。

先进的CORS

W3C推荐了一种更为先进的机制，也就是CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部，让服务器能声明哪些来源能够经过浏览器访问该服务器上的资源，从而决定请求或响应是应该成功仍是失败，CORS自己并不是绝对很安全，可利用OAuth2措施来增强保障。

与JSONP相比较，CORS支持全部类型的HTTP请求，且开发者可使用原生普通的XMLHttpRequest对象发起请求和得到数据，配合新的JSAPI一块儿使用，实现强大的新体验功能。