亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

跨域

v1 / 3406人閱讀

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

跨域的簡單小demo

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

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

demo介紹

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

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

Set Up

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

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

運(yùn)行步驟

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

CORS跨域

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

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

JSONP跨域

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

請求頁面： http://localhost:3000
響應(yīng)頁面為 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同源，那就可以訪問window.name屬性，而name值沒有變化，因?yàn)閣indow.name屬性在不同的頁面（甚至不同域名）加載后依舊存在。

項(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就可以通過獲取自身的hash值得到數(shù)據(jù)

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

document.domain跨域

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

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

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

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

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

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

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

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

WebSocket跨域

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/92533.html

相關(guān)文章

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

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

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

  • 大話javascript 5期：跨域

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

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

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

    摘要：學(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)上的博客寫了大多數(shù)跨域的簡單demo，可以自己在本地運(yùn)行，而且不用配置服務(wù)器。自己對于跨域的理解剛開始...

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

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

    摘要：學(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)上的博客寫了大多數(shù)跨域的簡單demo，可以自己在本地運(yùn)行，而且不用配置服務(wù)器。自己對于跨域的理解剛開始...

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

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

    摘要：學(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)上的博客寫了大多數(shù)跨域的簡單demo，可以自己在本地運(yùn)行，而且不用配置服務(wù)器。自己對于跨域的理解剛開始...

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

  • javascript跨域

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

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

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

0條評(píng)論

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