浏览器跨域

什么是跨域

一般来说，当一个请求url的协议、域名、端口三者之间任意一个与当前页面地址不同即为跨域。

原因

跨域产生的条件：浏览器同源策略限制

浏览器是从两个方面去做这个同源策略的：

• DOM同源策略。
  禁止对不同源的页面的DOM进行操作，主要包括iframe、canvas之类的。不同源的iframe禁止数据交互的，含有不同源数据的canvas会受到污染而无法进行操作。
• XmlHttpRequest同源策略。
  简单来说就禁止不同源的AJAX请求，主要用来防止CSRF攻击。

同源策略

同源是指“三个相同”：

• 协议相同
• 域名相同
• 端口相同

同源策略的限制

• 存储在浏览器中的数据，如localStroage、Cookie和IndexedDB不能通过脚本跨域访问
• 不能通过脚本操作不同域下的DOM
• 不能通过ajax请求不同域的数据

在浏览器中，script，img、iframe、link等标签都可以加载跨域资源，而不受同源限制，但浏览器限制了JavaScript的权限使其不能读、写加载的内容。

跨域的解决方案

• JSONP
• CORS
• document.domain + iframe
• location.hash + iframe
• window.name + iframe
• postMessage
• nginx代理
• nodejs中间件代
• WebSocket

参考链接：
前端常见跨域解决方案（全）
跨域二三事