用简单的 demo 学习各种跨域

[xuhaodong66]

前言

因为学习跨域需要配置本地服务器，可能会比较麻烦，所以自己根据网上的博客写了大多数跨域的简单 demo，可以自己在本地运行，而且不用配置服务器。自己对于跨域的理解刚开始也仅仅在于网上的博客文章，通过写这些可以本地运行的 demo 让我对跨域有了更直面的理解，希望这些 demo 对你们有帮助，有错误的话欢迎指正，欢迎 PR。

github 地址: https://github.com/FatDong1/cross-domain

多种跨域 demo

• CROS 跨域

• JSONP 跨域

• postMessage 跨域，html5 新 API

• window.name 跨域

• location.hash 跨域

• document.domain 跨域

• 后端 proxy 代理跨域

  • demo1，通过使用 http-proxy-middleware 插件设置后端的代理

  • demo2，不使用插件去配置代理，更加原生地解释了 proxy 跨域的原理

• websocket 跨域

优点

• 通过本地运行 demo，可以快速理解多种跨域。

• demo 简单易懂，内附许多注释。

• 学习门槛低。

原理

通过 nodeJS 的 express 框架在 3000 端口和 3001 端口分别生成服务器，在 3000 端口和 3001 端口进行跨域访问。

学习建议

在学习其中一种跨域方法的时候，建议边运行项目里的 demo，边在网上搜索博客文章学习这种跨域方法，这样有助于快速并且深入理解跨域。鉴于网上有很多文章详细讲述跨域知识，只是少了可以本地运行的 demo，所以这里就不再赘述跨域知识。