JavaScript跨域问题

一般情况下，前后端在传输数据时，都是在访问同一个域的资源。但有时也不可避免的要跨域发送请求，这是本文要探讨的内容。

（一） 什么是跨域

同源策略：

通过XHR实现AJAX通信的一个主要限制，来源于跨域安全策略。默认情况下，XHR只能访问于包含它的页面位于同一个域中的资源 。（所谓同一个域就是指 协议、域名、端口 三者相同）

跨域：

就是指违反同源策略，向不同的域发送请求，访问资源。

(二) 跨域的方法

1、CORS(CROSS-ORIGIN RESOURCE SHARING)

cors需要浏览器和服务器端同时支持（主要是服务器端支持）。只要后端实现了cors，就实现了跨域。
服务器端设置响应头部：Access-Control-Allow-Origin就可以开启cors。该属性可以设置那些网站可以访问资源。如果设置没有这个头部，浏览器就会驳回请求。
cors是实现跨域最根本的解决方案，可以发送任意请求，但前提是要服务器端支持。

2、jsonp（json with padding 带参数的json）

原理：利用script标签没有跨域限制的漏洞，网页可以得到从其他来源动态生成的json数据。
jsonp由两个部分组成回调函数和数据。回调函数是响应到来时应该在页面中调用的函数（用来处理json数据），数据就是传入回调函数的json数据。下面一个例子（使用的豆瓣影评的接口）

var script = document.createElement(‘script’);
script.setAttribute(‘src’, ‘http://api.douban.com/v2/movie/top250?callback=handleResponse’);
document.body.appendChild(script);
var moive;
function handleResponse(response) {
//你可以在此函数中任意处理传来的json数据
}