跨域问题的九种解决方法

什么是跨域？

　　跨域是由于浏览器的同源策略造成的，是浏览器施加的安全限制。

什么是同源策略/SOP（Same origin policy）？

　　同源策略是一种约定，是浏览器最核心最基本的安全功能，缺少同源策略，浏览器容易收到XSS、CSRF等攻击。

　　同源策略是：拥有相同的协议、域名、端口号的网址间才可以相互访问资源。

　　一个域的页面去访问另一个域的资源就形成了跨域。

解决跨域的方法：

　　注意：1.如果是协议和端口造成的跨域问题，前端无法处理；

　　　　　2.是否跨域，仅仅通过URL的首部来判断，不会通过域名对应的IP地址是否相同来判断；

　　　　　3.跨域并不是请求发不出去，而是请求发出去了，也正常返回结果了，但是结果被浏览器拦截了。

1.利用JSONP方式解决跨域

　　利用script标签没有跨域的限制，网页可以从其他来源动态的获取JSON数据，从而实现跨域。

　　JSONP跨域仅支持GET请求，一定要服务器支持才可以实现。

　　JSONP是非同源策略，AJAX属于同源策略。　

2.利用CORS（Cross-Origin Resource Sharing）技术，需要前后端同时支持

　　前端浏览器在IE9以上，后端在响应报头添加Access-Control-Allow-Origin标签，从而允许指定域的站点访问当前域上的资源。

　　res.setHeader("Access-Control-Allow-Origin","*");
 不过CORS默认只支持GET/POST这两种http请求类型，如果要开启PUT/DELETE之类的方式，需要在服务端在添加一个"Access-Control-Allow-Methods"报头标签。

 

3.利用H5的postMessage 方法和 onmessage 事件解决跨域问题

　　可实现多窗口之间的数据传递

4.利用H5的websocket协议，实现浏览器与服务器的全双工通信，同时允许跨域通讯。

服务器代理

5.node作为中间件代理

6.或者Nginx作为反向代理

iframe配合的三种形式

7.iframe+document.domain

　　该方法只适合子域相同，主域不同的情况，在两个页面都设置document.domain='子域'，其中一个页面嵌套另一个页面，就可以进行窗口之间的通信了。

8.iframe+location.hash

　　通过改变location.hash的值，并不会导致页面刷新，来传递值

9.iframe+window.name