跨域问题

参考：

http://blog.csdn.net/lambert310/article/details/51683775

https://www.cnblogs.com/chenshishuo/p/4919224.html

一、什么是跨域

浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了.

二、同源

同源是指：域名，协议，端口均相同。

三、解决方法

1.jsonp

1）jsonp简介

jsonp全称是JSON with Padding,是为了解决跨域请求资源而产生的解决方案,是一种依靠开发人员创造出的一种非官方跨域数据交互协议。

jsonp约定了两个东西。一个是描述信息的格式，一个是信息传递双方约定的方法。

2）jsonp如何产生

在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，凡是拥有scr这个属性的标签都可以跨域，jsonp正是利用这个特性来实现的。

如果想通过纯web端跨域访问数据只有一种可能,那就是把远程服务器上的数据装进js格式的文件里。

为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端。

3）基于jquery的跨域用法

jquery已把跨域封装到ajax上了,而且封装得非常好,使用起来也特别方便。

$.ajax({

    type : 'get',

    url:'http://192.168.31.137/train/test/testjsonp',

    data : {

        name : name,

        sex : sex,

        address : address,

        looks : looks,

    },

    cache :false,

    jsonp: "callback",

    jsonpCallback:"success",

    dataType : 'jsonp',

    success:function(data){

        alert(data);

    },

    error:function(data){

        alert('error');

    }

});

jsonp传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)

jsonpCallback自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名

4）缺点

跨域请求是只能是get请求不能使用post请求

2.代理

例如www.123.com/index.html需要调用www.456.com/server.php，可以写一个接口www.123.com/server.php，由这个接口在后端去调用www.456.com/server.php并拿到返回值，然后再返回给index.html，这就是一个代理的模式。相当于绕过了浏览器端，自然就不存在跨域问题。

3、跨域资源共享（CORS）

Cross-Origin Resource Sharing使用自定义的HTTP头部让浏览器与服务器沟通，从而决定请求和响应是否成功。这种方式使用了一个新的Origin请求头和一个新的Access-Control-Allow-Origin响应头扩展了HTTP。允许服务端设置Access-Control-Allow-Origin头标识哪些站点可以请求文件，或者设置Access-Control-Allow-Origin头为"*"，允许任意站点访问文件。

浏览器，例如Firefox3.5，Safari4，IE10使用这个头允许跨域HTTP请求。

服务器端在HTTP的响应头中加入（页面层次的控制模式）：

Access-Control-Allow-Origin: example.com

Access-Control-Request-Method: GET, POST

Access-Control-Allow-Headers: Content-Type, Authorization, Accept, Range, Origin

Access-Control-Expose-Headers: Content-Range

Access-Control-Max-Age: 3600

多个域名之间用逗号分隔，表示对所示域名提供跨域访问权限。"*"表示允许所有域名的跨域访问

客户端可以有两种行为：

1. 发送OPTIONS请求，请求Access-Control信息。如果自己的域名在允许的访问列表中，则发送真正的请求，否则放弃请求发送。

2. 直接发送请求，然后检查response的Access-Control信息，如果自己的域名在允许的访问列表中，则读取response body，否则放弃。 本质上服务端的response内容已经到达本地，JavaScript决定是否要去读取。

4、使用HTML5中新引进的window.postMessage方法来跨域传送数据