成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

跨域

v1 / 3369人閱讀

摘要：跨域的簡(jiǎn)單小這是一個(gè)關(guān)于跨域的簡(jiǎn)單集合，在里面會(huì)加上自己的理解并添加相應(yīng)的注釋?zhuān)M量以簡(jiǎn)單的介紹跨域的方法，適合入門(mén)學(xué)習(xí)跨域的。介紹用的框架在端口和端口分別開(kāi)啟一個(gè)靜態(tài)服務(wù)器，在兩個(gè)端口間進(jìn)行跨域傳輸數(shù)據(jù)。

跨域的簡(jiǎn)單小demo

這是一個(gè)關(guān)于跨域的簡(jiǎn)單demo集合，在demo里面會(huì)加上自己的理解并添加相應(yīng)的注釋?zhuān)M量以簡(jiǎn)單的demo介紹跨域的方法，適合入門(mén)學(xué)習(xí)跨域的。所有demo都是使用基于nodeJs的Web開(kāi)發(fā)框架Express，需要一點(diǎn)點(diǎn)nodeJS的知識(shí)，如果不會(huì)nodeJS也沒(méi)關(guān)系，注釋里面會(huì)詳細(xì)解釋說(shuō)明。

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

demo介紹

用node的web框架express在3000端口和3001端口分別開(kāi)啟一個(gè)靜態(tài)服務(wù)器，在兩個(gè)端口間進(jìn)行跨域傳輸數(shù)據(jù)。
配置文件解釋

.gitattributes配置文件，可以改變這個(gè)github項(xiàng)目的語(yǔ)言標(biāo)簽
.gitignore配置文件，設(shè)置使用git上傳時(shí)忽略哪些文件
package.json配置文件，主要是為了npm install而存在，安裝express等模塊
readme.md配置文件，在github上面展示說(shuō)明項(xiàng)目，也就是現(xiàn)在正在看的文檔

Set Up

運(yùn)行環(huán)境

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

運(yùn)行步驟

git clone [email protected]:FatDong1/cross-domain
cross-domain目錄下npm install，下載項(xiàng)目所需的依賴(lài)
進(jìn)入對(duì)應(yīng)的demo目錄，①node serverRes.js ②重新開(kāi)一個(gè)dos窗口 ③node serverReq.js
或者在對(duì)應(yīng)的demo目錄下，dos窗口輸入run.bat，直接一步完成上面的①②③

CORS跨域

項(xiàng)目運(yùn)行起來(lái)之后，

請(qǐng)求數(shù)據(jù)頁(yè)面地址： http://localhost:3000
查看數(shù)據(jù)： http://localhost:3001

JSONP跨域

項(xiàng)目運(yùn)行起來(lái)后，

請(qǐng)求頁(yè)面： http://localhost:3000
響應(yīng)頁(yè)面為 http://localhost:3001

postMessage跨域

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

項(xiàng)目運(yùn)行地址： http://localhost:3000

window.name跨域

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

項(xiàng)目運(yùn)行地址： http://localhost:3000/a.html

location.hash跨域

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

項(xiàng)目運(yùn)行地址： http://localhost:3000/a.html

document.domain跨域

document.domain設(shè)置成自身或更高一級(jí)的父域，且主域必須相同。
注意??！

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

線(xiàn)上訪(fǎng)問(wèn)地址： http://a.xuhaodong.cn/a.html

如果要在本地運(yùn)行的話(huà)，需要搭建一個(gè)本地web服務(wù)器， 參考鏈接：https://github.com/web2hack/p...

后端設(shè)置代理proxy跨域

因?yàn)镴S同源策略是瀏覽器的安全策略，所以在瀏覽器客戶(hù)端不能跨域訪(fǎng)問(wèn)，而服務(wù)器端調(diào)用HTTP接口只是使用HTTP協(xié)議，不會(huì)執(zhí)行JS腳本，不需要同源策略，也就沒(méi)有跨越問(wèn)題。簡(jiǎn)單地說(shuō)，就是瀏覽器不能跨域，后臺(tái)服務(wù)器可以跨域。

demo1 通過(guò)使用http-proxy-middleware插件設(shè)置后端的代理，在 http://localhost:3000 運(yùn)行

demo2 不使用插件配置代理，直接使用http模塊發(fā)出請(qǐng)求， 在 http://localhost:3000 運(yùn)行

WebSocket跨域

WebSocket是一種通信協(xié)議，使用ws://（非加密）和wss://（加密）作為協(xié)議前綴。該協(xié)議不實(shí)行同源政策，只要服務(wù)器支持，就可以通過(guò)它進(jìn)行跨源通信。

項(xiàng)目運(yùn)行地址： http://localhost:3000/a.html

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92533.html

相關(guān)文章

  • ajax跨域，這應(yīng)該是最全的解決方案了

    摘要：關(guān)于，強(qiáng)烈推薦閱讀跨域資源共享詳解阮一峰另外，這里也整理了一個(gè)實(shí)現(xiàn)原理圖簡(jiǎn)化版如何判斷是否是簡(jiǎn)單請(qǐng)求瀏覽器將請(qǐng)求分成兩類(lèi)簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求。 前言 從剛接觸前端開(kāi)發(fā)起，跨域這個(gè)詞就一直以很高的頻率在身邊重復(fù)出現(xiàn)，一直到現(xiàn)在，已經(jīng)調(diào)試過(guò)N個(gè)跨域相關(guān)的問(wèn)題了，16年時(shí)也整理過(guò)一篇相關(guān)文章，但是感覺(jué)還是差了點(diǎn)什么，于是現(xiàn)在重新梳理了一下。 個(gè)人見(jiàn)識(shí)有限，如有差錯(cuò)，請(qǐng)多多見(jiàn)諒，歡迎提出iss...

    ytwman 評(píng)論0 收藏0

  • 大話(huà)javascript 5期：跨域

    摘要：同源策略所謂同源是指協(xié)議，域名，端口均相同。同源策略是瀏覽器的一個(gè)安全功能，不同源的客戶(hù)端腳本在沒(méi)有明確授權(quán)的情況下，不能讀寫(xiě)對(duì)方資源。需注意的是由于同源策略的限制，所讀取的為跨域請(qǐng)求接口所在域的，而非當(dāng)前頁(yè)。 一、什么是跨域 1.URL解析 URL （Uniform Resource Locator ）統(tǒng)一資源定位符（URL）是用于完整地描述Internet上網(wǎng)頁(yè)和其他資源的地址的...

    jzzlee 評(píng)論0 收藏0

  • 用本地運(yùn)行的demo快速入門(mén)跨域

    摘要：學(xué)習(xí)建議在學(xué)習(xí)其中一種跨域方法的時(shí)候，建議邊運(yùn)行項(xiàng)目里的，邊在網(wǎng)上搜索博客文章學(xué)習(xí)這種跨域方法，這樣有助于快速并且深入理解跨域。鑒于網(wǎng)上有很多文章詳細(xì)講述跨域知識(shí)，只是少了可以本地運(yùn)行的，所以這里就不再贅述跨域知識(shí)。 前言 因?yàn)閷W(xué)習(xí)跨域需要配置本地服務(wù)器，可能會(huì)比較麻煩，所以自己根據(jù)網(wǎng)上的博客寫(xiě)了大多數(shù)跨域的簡(jiǎn)單demo，可以自己在本地運(yùn)行，而且不用配置服務(wù)器。自己對(duì)于跨域的理解剛開(kāi)始...

    yy736044583 評(píng)論0 收藏0

  • 用本地運(yùn)行的demo快速入門(mén)跨域

    摘要：學(xué)習(xí)建議在學(xué)習(xí)其中一種跨域方法的時(shí)候，建議邊運(yùn)行項(xiàng)目里的，邊在網(wǎng)上搜索博客文章學(xué)習(xí)這種跨域方法，這樣有助于快速并且深入理解跨域。鑒于網(wǎng)上有很多文章詳細(xì)講述跨域知識(shí)，只是少了可以本地運(yùn)行的，所以這里就不再贅述跨域知識(shí)。 前言 因?yàn)閷W(xué)習(xí)跨域需要配置本地服務(wù)器，可能會(huì)比較麻煩，所以自己根據(jù)網(wǎng)上的博客寫(xiě)了大多數(shù)跨域的簡(jiǎn)單demo，可以自己在本地運(yùn)行，而且不用配置服務(wù)器。自己對(duì)于跨域的理解剛開(kāi)始...

    GraphQuery 評(píng)論0 收藏0

  • 用本地運(yùn)行的demo快速入門(mén)跨域

    摘要：學(xué)習(xí)建議在學(xué)習(xí)其中一種跨域方法的時(shí)候，建議邊運(yùn)行項(xiàng)目里的，邊在網(wǎng)上搜索博客文章學(xué)習(xí)這種跨域方法，這樣有助于快速并且深入理解跨域。鑒于網(wǎng)上有很多文章詳細(xì)講述跨域知識(shí)，只是少了可以本地運(yùn)行的，所以這里就不再贅述跨域知識(shí)。 前言 因?yàn)閷W(xué)習(xí)跨域需要配置本地服務(wù)器，可能會(huì)比較麻煩，所以自己根據(jù)網(wǎng)上的博客寫(xiě)了大多數(shù)跨域的簡(jiǎn)單demo，可以自己在本地運(yùn)行，而且不用配置服務(wù)器。自己對(duì)于跨域的理解剛開(kāi)始...

    Integ 評(píng)論0 收藏0

  • javascript跨域

    摘要：實(shí)現(xiàn)跨域的原理通過(guò)方式請(qǐng)求載入并執(zhí)行一個(gè)文件，相當(dāng)于通過(guò)的形式的導(dǎo)入一個(gè)外部的方法語(yǔ)法該函數(shù)是簡(jiǎn)寫(xiě)的函數(shù)，等價(jià)于在中，您可以通過(guò)使用形式的回調(diào)函數(shù)來(lái)加載其他網(wǎng)域的數(shù)據(jù)，如。將自動(dòng)替換為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)。 更多詳情見(jiàn)http://blog.zhangbing.club/Ja... 最近在項(xiàng)目開(kāi)發(fā)的過(guò)程中遇到一些Javascript 跨域請(qǐng)求的問(wèn)題，今天抽空對(duì)其進(jìn)行總結(jié)一下，以...

    PingCAP 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<