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

資訊專欄INFORMATION COLUMN

跨域（入門）

Shonim / 1210人閱讀

摘要：跨域同源策略所謂同源，就是三個(gè)相同協(xié)議相同域名相同端口相同。同源策略的目的保證用戶信息的安全，防止惡意網(wǎng)站竊取數(shù)據(jù)。是的標(biāo)準(zhǔn)，全稱是跨域資源共享。是的一個(gè)，可以解決多窗口窗口和之間的消息通信的跨域問題。

JS跨域

同源策略

所謂“同源”，就是“三個(gè)相同”：協(xié)議相同、域名相同、端口相同。
同源策略的目的：保證用戶信息的安全，防止惡意網(wǎng)站竊取數(shù)據(jù)。
如果是非同源，共有三種行為會受到限制：
1.Cookie、LocalStorage、IndexDB無法讀??；
2.DOM無法獲??；（主要場景是ifame跨域的情況，不同域名的iframe是限制互相訪問的）
3.AJAX請求不能發(fā)送；

跨域的解決方法

跨域資源共享（CORS）

html5新增的標(biāo)準(zhǔn)，IE10以下不支持。
CORS是W3C的標(biāo)準(zhǔn)，全稱是跨域資源共享(Cross-Origin Resource sharing)。CORS定義了必須在訪問跨域資源時(shí)，瀏覽器與服務(wù)器應(yīng)該如何溝通。它的思想就是使用自定義的HTTP頭部讓瀏覽器與服務(wù)器進(jìn)行溝通，從而決定請求或響應(yīng)是成功還是失敗。
使用：
對于前端，我們還是正常使用xhr對象發(fā)送ajax請求。唯一需要注意的是，我們需要設(shè)置xhr中的withCredentials為true，不然無法傳遞cookie，xhr.withCredentials=true;
對于服務(wù)端，需要在response header中設(shè)置如下兩個(gè)字段：
Access-Control-Allow-Origin:http://www.yourhost.com
Access-Control-Allow-Credentials:true

JSONP

JSONP的原理：在頁面上引入不同域上的js腳本文件是可以的，所以可以通過動態(tài)創(chuàng)建script標(biāo)簽，然后利用src屬性進(jìn)行跨域。通過將前端方法作為參數(shù)傳遞到服務(wù)器端，然后由服務(wù)器端注入?yún)?shù)之后再返回，實(shí)現(xiàn)服務(wù)器端向客戶端通信。

注：src請求都必須是get方法，就像你在瀏覽器地址欄輸入地址回車一樣。

function fun(fata){
    console.log(data);
}
var body=document.getElementsByTagName("body")[0];
var script=document.getElement("script");
script.type="text/javascript";
script.src="demo.js?callback=fun";
body.appendChild(script);
//返回的js腳本直接會執(zhí)行，就執(zhí)行已經(jīng)定義好的fun函數(shù)，并且把數(shù)據(jù)傳入進(jìn)來。
fun({"name":"name"})

CORS VS JSONP
都能解決ajax直接請求普通文件存在跨域無權(quán)訪問的問題
1.JSONP只能實(shí)現(xiàn)get請求，而CORS支持所有類型的http請求
2.使用CORS，開發(fā)者可以使用普通的XHR發(fā)起請求和獲得數(shù)據(jù)，比起JSONP有更好的錯(cuò)誤處理
3.JSONP主要被老的瀏覽器支持，它們往往不支持CORS，而現(xiàn)代瀏覽器都支持CORS

document.domain

修改document.domain的方法只適用于不同子域的框架間的交互。
對于主域名相同，而子域名不同的情況，可以使用document.domain來跨域 這種方式非常適用于iframe跨域的情況，比如：
a頁面地址為?http://a.yourhost.com?
b頁面為?http://b.yourhost.com。
這樣就可以通過分別給兩個(gè)頁面設(shè)置 document.domain =?http://yourhost.com?來實(shí)現(xiàn)跨域。
之后，就可以通過 parent 或者 window["iframename"]等方式去拿到iframe的window對象了。

postMessage

postMessage是html5的一個(gè)API，可以解決多窗口、窗口和iframe之間的消息通信的跨域問題。
postmessage(data, origin)，其中data指的就是需要傳遞的數(shù)據(jù)，origin指的是具體的數(shù)據(jù)源地址(包括協(xié)議+域名+端口)。然后window對message事件進(jìn)行監(jiān)聽。





document.getElementById("send").onclick = function() {
    var msg = document.getElementById("msg").value;
    var iframeWindow = document.getElementById("iframe").contentWindow;
    iframeWindow.postMessage(msg,"http://next.com/next.html");
}



    
以下是接收到的消息：

    

         
    




window.addEventListnerner("message",handle,false){//window對message時(shí)間監(jiān)聽
}
function handle(event){
    if(event.origin==="http://source.com"){
        document.getElementById("msg").innerHTML=event.data;
    }
}

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

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

相關(guān)文章

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

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

    yy736044583 評論0 收藏0

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

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

    GraphQuery 評論0 收藏0

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

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

    Integ 評論0 收藏0

  • Nginx入門及如何反向代理解決生產(chǎn)環(huán)境跨域問題

    摘要：還是回到萬能的文件，添加匹配規(guī)則實(shí)現(xiàn)代理轉(zhuǎn)發(fā)設(shè)置代理轉(zhuǎn)發(fā)通過上面的設(shè)置，在重啟服務(wù)，可以讓頁面中所有包含字段的請求都轉(zhuǎn)為由服務(wù)器去向地址發(fā)送請求，從而巧妙的解決了瀏覽器的跨域問題。 1.Nginx入門與基本操作篇 注：由于服務(wù)器是windows系統(tǒng)，所以本文主要講解Nginx在windows下的操作。 首先下載Nginx 解壓縮，我們所有的配置基本都在萬能的 nginx/conf/...

    Moxmi 評論0 收藏0

  • 服務(wù)器部署工具 - 收藏集 - 掘金

    摘要：基本入門前端掘金作者本文屬于翻譯文章，原文鏈接為。如果如何把應(yīng)用放在容器中運(yùn)行掘金本文適合零基礎(chǔ)，且希望使用運(yùn)行應(yīng)用的人士。后端掘金使用構(gòu)建網(wǎng)站。 nginx 基本入門 - 前端 - 掘金作者：villainthr 本文屬于翻譯文章，原文鏈接為 nginx Beginner’s Guide。是至今為止見過最好的 nginx 入門文章。額。。。沒有之一。 這篇教程簡單介紹了 nginx ...

    Shonim 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<