前端不同服务器之间的通信_前端跨域方案

所谓跨域，顾名思义，跨到了另外的域，域不仅仅指的是不同的域名网站，可能同一个域名不同的端口号也算不同的域。浏览器是有规则的，只要 协议、域名、端口 有任何一个不同，都被当作是不同的域。协议指的是 http，或者 https 等。

跨域概念

一个域下的文档或脚本试图去请求另一个域下的资源。

跨域形式

•  标签嵌入 CSS。由于 CSS 的松散的语法规则，CSS 的跨域需要一个设置正确的 Content-Type 消息头。不同浏览器有不同的限制：IE、Firefox、Chrome、Safari(跳至CVE-2010-0051)部分和 Opera

•  嵌入图片。支持的图片格式包括 PNG、JPEG、GIF、BMP、SVG、…

• 、 和  的插件

• @font-face 引入的字体。一些浏览器允许跨域字体(cross-origin fonts)，一些需要同源字体(same-origin fonts)

•  和 

同源策略

同源策略-SOP(Same Origin Policy)是一种约定，由 Netscape 公司 1995 年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到 XSS、CSFR 等攻击。所谓同源是指 协议+域名+端口 三者相同，即便两个不同的域名指向同一个 IP 地址，也非同源。

• 协议相同

• 域名相同

• 端口相同

同源策略目的

为了保证用户信息的安全，防止恶意的网站窃取数据。

同源策略限制范围

• Cookie、LocalStorage 和 IndexDB 无法读取

• DOM 无法获得

• AJAX 请求不能发送

跨域场景

跨域解决方案

• jsonp 跨域

• document.domain + iframe 跨域

• location.hash + iframe 跨域

• window.name + iframe 跨域

• postMessage 跨域

• 跨域资源共享(CORS)

• Nginx 代理跨域

• NodeJS 中间件代理跨域

• WebSocket 协议跨域

jsonp 跨域

原生方案

前端代码：

var script = document.createElement('script')script.type = 'text/javascript'script.src