跨域

v1 發布于2019-08-22 13:51 / 3342人閱讀

摘要：跨域的簡單小這是一個關于跨域的簡單集合，在里面會加上自己的理解并添加相應的注釋，盡量以簡單的介紹跨域的方法，適合入門學習跨域的。介紹用的框架在端口和端口分別開啟一個靜態服務器，在兩個端口間進行跨域傳輸數據。

跨域的簡單小demo

這是一個關于跨域的簡單demo集合，在demo里面會加上自己的理解并添加相應的注釋，盡量以簡單的demo介紹跨域的方法，適合入門學習跨域的。所有demo都是使用基于nodeJs的Web開發框架Express，需要一點點nodeJS的知識，如果不會nodeJS也沒關系，注釋里面會詳細解釋說明。

如果還有其他沒提及的跨域方法，歡迎PR，謝謝！ 如果要收藏的話，歡迎star。 不定期更新教程，歡迎follow訂閱。

demo介紹

用node的web框架express在3000端口和3001端口分別開啟一個靜態服務器，在兩個端口間進行跨域傳輸數據。
配置文件解釋

.gitattributes配置文件，可以改變這個github項目的語言標簽
.gitignore配置文件，設置使用git上傳時忽略哪些文件
package.json配置文件，主要是為了npm install而存在，安裝express等模塊
readme.md配置文件，在github上面展示說明項目，也就是現在正在看的文檔

Set Up

運行環境

node.js 全局安裝
npm 全局安裝

運行步驟

git clone git@github.com:FatDong1/cross-domain
cross-domain目錄下npm install，下載項目所需的依賴
進入對應的demo目錄，①node serverRes.js ②重新開一個dos窗口 ③node serverReq.js
或者在對應的demo目錄下，dos窗口輸入run.bat，直接一步完成上面的①②③

CORS跨域

項目運行起來之后，

請求數據頁面地址： http://localhost:3000
查看數據： http://localhost:3001

JSONP跨域

項目運行起來后，

請求頁面： http://localhost:3000
響應頁面為 http://localhost:3001

postMessage跨域

這是html5的新API，適用于不同窗口iframe之間的跨域

項目運行地址： http://localhost:3000

window.name跨域

在 http://localhost:3000/a.html 使用js動態生成一個隱藏的iframe，設置src屬性為" http://localhost:3001/c.html "，等這個iframe加載完之后，重新設置src屬性為同源的地址" http://localhost:3000/b.html "(b.html是一個空的html文件)，現在iframe與a.html同源，那就可以訪問window.name屬性，而name值沒有變化，因為window.name屬性在不同的頁面（甚至不同域名）加載后依舊存在。

項目運行地址： http://localhost:3000/a.html

location.hash跨域

在 http://localhost:3000/a.html 使用js動態生成一個隱藏的iframe，設置src屬性為" http://localhost:3001/c.html#getdata "，在c.html判斷hash值是否為"#getdata"，如果為"#getdata"，則在當前的iframe(c.html)中再生成一個隱藏的iframe，其src屬性指向" http://localhost:3000/b.html "，因為a.html和b.html同源，所以可以在b.html里面修改a.html的hash值，這樣a.html就可以通過獲取自身的hash值得到數據

項目運行地址： http://localhost:3000/a.html

document.domain跨域

document.domain設置成自身或更高一級的父域，且主域必須相同。
注意！！

這是掛在我自己騰訊云域名(xuhaodong.cn)上的demo，所以抱歉這個demo無法在本地運行。不過我只是把demo放到了云服務器上，代碼還是一樣的，沒有修改過。

線上訪問地址： http://a.xuhaodong.cn/a.html

如果要在本地運行的話，需要搭建一個本地web服務器，參考鏈接：https://github.com/web2hack/p...

后端設置代理proxy跨域

因為JS同源策略是瀏覽器的安全策略，所以在瀏覽器客戶端不能跨域訪問，而服務器端調用HTTP接口只是使用HTTP協議，不會執行JS腳本，不需要同源策略，也就沒有跨越問題。簡單地說，就是瀏覽器不能跨域，后臺服務器可以跨域。

demo1 通過使用http-proxy-middleware插件設置后端的代理，在 http://localhost:3000 運行

demo2 不使用插件配置代理，直接使用http模塊發出請求， 在 http://localhost:3000 運行

WebSocket跨域

WebSocket是一種通信協議，使用ws://（非加密）和wss://（加密）作為協議前綴。該協議不實行同源政策，只要服務器支持，就可以通過它進行跨源通信。

項目運行地址： http://localhost:3000/a.html

摘自 Github FatDong1（https://github.com/FatDong1/c...）

云服務器 GPU云服務器端跨域跨域 cdn跨域 SONP跨域

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92533.html

ajax跨域，這應該是最全的解決方案了

摘要：關于，強烈推薦閱讀跨域資源共享詳解阮一峰另外，這里也整理了一個實現原理圖簡化版如何判斷是否是簡單請求瀏覽器將請求分成兩類簡單請求和非簡單請求。前言從剛接觸前端開發起，跨域這個詞就一直以很高的頻率在身邊重復出現，一直到現在，已經調試過N個跨域相關的問題了，16年時也整理過一篇相關文章，但是感覺還是差了點什么，于是現在重新梳理了一下。個人見識有限，如有差錯，請多多見諒，歡迎提出iss...

ytwman 2019-08-22 11:21 評論0 收藏0
大話javascript 5期：跨域

摘要：同源策略所謂同源是指協議，域名，端口均相同。同源策略是瀏覽器的一個安全功能，不同源的客戶端腳本在沒有明確授權的情況下，不能讀寫對方資源。需注意的是由于同源策略的限制，所讀取的為跨域請求接口所在域的，而非當前頁。一、什么是跨域 1.URL解析 URL （Uniform Resource Locator ）統一資源定位符（URL）是用于完整地描述Internet上網頁和其他資源的地址的...

jzzlee 2019-08-23 16:42 評論0 收藏0
用本地運行的demo快速入門跨域

摘要：學習建議在學習其中一種跨域方法的時候，建議邊運行項目里的，邊在網上搜索博客文章學習這種跨域方法，這樣有助于快速并且深入理解跨域。鑒于網上有很多文章詳細講述跨域知識，只是少了可以本地運行的，所以這里就不再贅述跨域知識。前言因為學習跨域需要配置本地服務器，可能會比較麻煩，所以自己根據網上的博客寫了大多數跨域的簡單demo，可以自己在本地運行，而且不用配置服務器。自己對于跨域的理解剛開始...

yy736044583 2019-08-20 17:19 評論0 收藏0
用本地運行的demo快速入門跨域

摘要：學習建議在學習其中一種跨域方法的時候，建議邊運行項目里的，邊在網上搜索博客文章學習這種跨域方法，這樣有助于快速并且深入理解跨域。鑒于網上有很多文章詳細講述跨域知識，只是少了可以本地運行的，所以這里就不再贅述跨域知識。前言因為學習跨域需要配置本地服務器，可能會比較麻煩，所以自己根據網上的博客寫了大多數跨域的簡單demo，可以自己在本地運行，而且不用配置服務器。自己對于跨域的理解剛開始...

GraphQuery 2019-08-29 12:48 評論0 收藏0
用本地運行的demo快速入門跨域

摘要：學習建議在學習其中一種跨域方法的時候，建議邊運行項目里的，邊在網上搜索博客文章學習這種跨域方法，這樣有助于快速并且深入理解跨域。鑒于網上有很多文章詳細講述跨域知識，只是少了可以本地運行的，所以這里就不再贅述跨域知識。前言因為學習跨域需要配置本地服務器，可能會比較麻煩，所以自己根據網上的博客寫了大多數跨域的簡單demo，可以自己在本地運行，而且不用配置服務器。自己對于跨域的理解剛開始...

Integ 2019-08-01 17:00 評論0 收藏0
javascript跨域

摘要：實現跨域的原理通過方式請求載入并執行一個文件，相當于通過的形式的導入一個外部的方法語法該函數是簡寫的函數，等價于在中，您可以通過使用形式的回調函數來加載其他網域的數據，如。將自動替換為正確的函數名，以執行回調函數。更多詳情見http://blog.zhangbing.club/Ja... 最近在項目開發的過程中遇到一些Javascript 跨域請求的問題，今天抽空對其進行總結一下，以...

PingCAP 2019-08-22 18:10 評論0 收藏0