JS跨域

浏览器出于安全考虑，采用同源策略。

同源策略：简单来讲同源策略就是浏览器为了保证用户信息的安全，防止恶意的网站窃取数据，禁止不同域之间的JS进行交互。对于浏览器而言只要域名、协议、端口其中一个不同就会引发同源策略，从而限制他们之间如下的交互行为：

• 1.Cookie、LocalStorage和IndexDB无法读取；

• 2.DOM无法获得；

• 3.AJAX请求不能发送。

跨域的严格一点的定义是：只要协议，域名，端口有任何一个的不同，就被当作是跨域。(也就不可以进行通信。)

需要注意的是：

1):如果是如果是协议和端口造成的跨域问题“前端”是无能为力的。

2):在跨域问题上，域仅仅是通过“URL的首部”来识别、而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。

如何解决跨域

1)跨域资源共享

• CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。
• 服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。
• 只需要在后台中加上响应头来允许域请求！在被请求的Response header中加入以下设置，就可以实现跨域访问了！

2)通过jsonp跨域

• JSONP是JSON with Padding（填充式json）的简写，是应用JSON的一种新方法，只不过是被包含在函数调用中的JSON，例如：
• JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。

• jsonp的原理：

  • 通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。（即用JavaScript动态加载一个script文件，同时定义一个callback函数给script执行而已。）
  • 在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。 例如：有个a.html页面，它里面的代码需要利用ajax获取一个不同域上的json数据，假设这个json数据地址是http://example.com/data.php，那么a.html中的代码就可以这样：
  • js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。

3)iframe实现跨域

• 基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点，也就是两个页面必须属于同一个顶级基础域（例如都是xxx.com，或是xxx.com.cn），使用同一协议（例如都是 http）和同一端口（例如都是80），这样在两个页面中同时添加document.domain，就可以实现父页面调用子页面的函数，代码如下：
• 这时候父页面就可以调用子页面的b函数，实现js跨域访问

4)后台处理方式

将数据传到后台，后台去实现数据传输【原因是后台传输时不涉及到跨域】，这也是我最喜欢的方式【笑】。