专栏名称: 蚂蚁金服ProtoTeam
数据前端团队
目录
相关文章推荐
宝山消防支队  ·  以案为例 |《油锅起火怎么办?》 ·  昨天  
前端早读课  ·  【第3459期】两款 AI 编程助手 ... ·  昨天  
前端之巅  ·  Dagger:我们用 GO 和 ... ·  2 天前  
前端早读课  ·  【第3458期】React ... ·  2 天前  
51好读  ›  专栏  ›  蚂蚁金服ProtoTeam

用demo的形式快速入门跨域

蚂蚁金服ProtoTeam  · 掘金  · 前端  · 2017-12-08 02:29

正文

前言

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

github地址: github.com/FatDong1/c.…

多种跨域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端口进行跨域访问。

项目运行环境

全局安装

  • nodeJS

  • npm

  • git

学习这些demo需要的基础

  • git clone项目到本地

  • 一点点nodeJS知识,注释里面大部分有讲解node知识,如果不会nodeJS也是可以去学习这些demo的。







请到「今天看啥」查看全文