用本地運行的demo快速入門跨域

前言

由於學習跨域須要配置本地服務器，可能會比較麻煩，因此本身根據網上的博客寫了大多數跨域的簡單demo，能夠本身在本地運行，並且不用配置服務器。本身對於跨域的理解剛開始也僅僅在於網上的博客文章，經過寫這些能夠本地運行的demo讓我對跨域有了更直面的理解，但願這些demo對大家有幫助，有錯誤的話歡迎指正，歡迎PR。

github地址: https://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的。

學習建議

在學習其中一種跨域方法的時候，建議邊運行項目裏的demo，邊在網上搜索博客文章學習這種跨域方法，這樣有助於快速而且深刻理解跨域。鑑於網上有不少文章詳細講述跨域知識，只是少了能夠本地運行的demo，因此這裏就再也不贅述跨域知識。

最後

若是demo裏面有什麼錯誤，歡迎拍磚，若是有什麼地方解釋不清楚，能夠在segmentfault私信我或者在gihtub提issue。

本文已同步到個人博客-- https://www.xuhaodong.cn/arti...