ajax不会触发浏览器同源策略,浏览器同源策略以及跨域解决方法

什么是浏览器的同源策略

同源是指同协议、同域名、同端口

注：IE 未将端口号加入到同源策略的组成部分之中

浏览器同源策略的目的是为了保证用户信息的安全，防止恶意的网站窃取数据。如果网页之间不满足同源要求，将不能:

共享Cookie、LocalStorage、IndexDB

获取DOM

AJAX请求不能发送

另外，同源策略又分为以下两种：

DOM 同源策略：禁止对不同源页面 DOM 进行操作。这里主要场景是 iframe 跨域的情况，不同域名的 iframe 是限制互相访问的。

XMLHttpRequest 同源策略：禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求。

同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。

开发中如何规避

(1)通过设置window.domain的方式实现共享cookie

这种方法适用于一级域名相同，二级域名不同的时候使用

例如：现在有www.example.com和example.com两个网页，可以通过设置window.domain的形式来处理,前端页面可以通过设置window.domain=example.com或者后台设置Set-Cookie: key=value; domain=.example.com; path=/来实现共享cookie

(2)通过修改片段标识符的方法实现跨域

这种方法适用于iframe嵌套网页间的跨域。片段标识符就是URL的#号后面的部分。改变片段标识符，页面不会刷新.

父窗口向子窗口传递信息

//父窗口

var src = originURL + '#' + data;

document.getElementById('myIFrame').src = src;

//子窗口通过监听hashchange事件回去父窗口传递的信息

window.onhashchange = checkMessage;

function checkMessage() {

var message = window.location.hash;

// ...

}

子窗口向父窗口传递信息

//子窗口修改父窗口的片段标识符，同样，父窗口也可以通过hashchange事件来获取数据

parent.location.href= target + "#" + hash;

(3)使用window.name处理跨域问题

window.name属性具有如下特点，无论是否同源，只要在同一窗口中设置了该属性，后一个网页就可以读取到。该方法借助window.name这一属性和iframe具有跨域能力的关键点，来处理跨域问题。

首先，在localhost:8080服务器创建文件demo.html和空白文件proxy.html,然后，在localhost:8081服务器创建data.html文件，文件内容如下所示：

//localhost:8080/demo.html

demo

demo

//localhost:8081/data.html

data

data

这种解决方法的优点是window.name容量大，缺点是：需要监听window.name变化，影响网页性能。

(4)使用window.postMessage解决跨域

这种方法借助HTML5的跨文档API(cross-document messaging)中增加的window.postMessage方法，允许跨窗口通信，不管窗口是否同源。父窗口和子窗口可以监听message事件，获取对方发送的消息。这种方法可以实现LocalStorage等信息的共享。

message的event对象提供三个属性：

event.source：发送消息的窗口

event.origin: 消息发向的网址

event.data: 消息内容

下面分别使用window.open的方法和嵌套iframe的方法实现父子窗口之间的通信

使用window.open方法父页面：

admin

parent

hello world

post message

子页面

//localhost:8081

mobile

chidren

send

使用iframe嵌套的方法,父页面

parent

parent

hello world

post message

子页面

chilren

chilren

send

(5)使用JSONP来实现AJAX的跨域

实现JSONP可以通过向HTML中添加script标签，由它向网址发送请求

$('body').append('http://www.example.com/getData?callback=foo');

fucntion foo(data){

}

(6)webSocket

是一种通信协议，使用ws://和wss://作为协议前缀，这种协议不受同源政策的影响，只要服务器支持就可以。

(7)CORS(Cross-Origin Resource Sharing,跨源资源分享)

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。这种解决跨域方法的优点是允许任何形式的请求，而JSONP只能发GET请求。

实现CORS通信的关键是服务器，只要服务器实现了CORS接口，就可跨源通信

(8)还有一种方法是使用Nginx转发。暂时还不了解，后续添加