JS跨域解决方法

浏览器的同源策略

浏览器禁止在不同域之间进行数据交换，议、域名、端口中有任何一个不同，都被当作是不同的域，主要是为了解决csrf攻击问题。

跨域

跨域指的就是越过安全界限，通过js在不同域之间进行数据传输

跨域限制

1.无法读取非同源的cookie、localstorage

2.无法操作非同源的dom

3.无法向非同源地址发送ajax请求

跨域请求方法

1.JSONP

script标签没有跨域请求限制，可以通过script标签指向一个地址并提供回调函数处理数据。

缺点：

1.只支持GET请求

2.不支持HTTPS

3.无法解决不同域的两个页面之间如何进行JavaScript调用的问题

4.无状态码返回

5.安全性差

优点：

1.方法简单

2.兼容性好

3.可以直接使用callback处理返回结果

2.跨域资源共享（cors）

是W3C的标准，允许浏览器向服务器发送跨域请求，在服务器端需要对请求头中Origin字段进行判断是否接受请求

1.服务器端需要配置Access-Control-Allow-Origin字段

2.会在实际请求前发送一次预验证请求（OPTIONS）

区别

1.CORS采用的是XHR方式发送请求，JSONP是利用script标签

2.CORS支持所有类型的HTTP请求，JSONP只支持GET请求

3.CORS不支持老版本的浏览器，JSONP支持老版本浏览器

4.CORS的安全性更好

3. document.domain + iframe 

通过修改document.domain属性把页面设置成相同的域名，浏览器会默认在处于同一域下，可以进行数据交换和DOM操作。

问题：

1.一个站点被攻击，另一个站点也会出现安全问题

2.一个页面引入了多个iframe必须设置为相同的domain

4.使用window.name + iframe

利用window.name属性在页面之间的共享特性，在引用页面利用iframe引入被引用页面，在被引用页面中利用window.name属性设置传递的数值

缺点：window.name中的数据不超过2M，且为string类型

5.window.postMessage

HTML5引入的跨域API，在发送方中调用postMessage方法，携带数据和目标地址，接收方利用对“message”事件监听和回调函数接受数据。

发送方调用者

1.iframe的contentWindow属性

2.window.open返回的窗口对象

数据的属性

1.data：数据本身

2.origin：发送者的origin字段，包括协议、域名、端口等

3.souce：对发生者的引用

6.webSocket

HTML5引入的协议，支持全双工通信和跨域通信

利用js创建了web socket，客户端发送HTTP请求发送到服务端发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。