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

資訊專欄INFORMATION COLUMN

跨域（入門）

Shonim / 1254人閱讀

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

JS跨域

同源策略

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

跨域的解決方法

跨域資源共享（CORS）

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

JSONP

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

注：src請(qǐng)求都必須是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腳本直接會(huì)執(zhí)行，就執(zhí)行已經(jīng)定義好的fun函數(shù)，并且把數(shù)據(jù)傳入進(jìn)來(lái)。
fun({"name":"name"})

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

document.domain

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

postMessage

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





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對(duì)message時(shí)間監(jiān)聽(tīng)
}
function handle(event){
    if(event.origin==="http://source.com"){
        document.getElementById("msg").innerHTML=event.data;
    }
}

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.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ì)講述跨域知識(shí)，只是少了可以本地運(yùn)行的，所以這里就不再贅述跨域知識(shí)。 前言 因?yàn)閷W(xué)習(xí)跨域需要配置本地服務(wù)器，可能會(huì)比較麻煩，所以自己根據(jù)網(wǎng)上的博客寫了大多數(shù)跨域的簡(jiǎn)單demo，可以自己在本地運(yùn)行，而且不用配置服務(wù)器。自己對(duì)于跨域的理解剛開(kāi)始...

    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ù)跨域的簡(jiǎn)單demo，可以自己在本地運(yùn)行，而且不用配置服務(wù)器。自己對(duì)于跨域的理解剛開(kāi)始...

    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ù)跨域的簡(jiǎn)單demo，可以自己在本地運(yùn)行，而且不用配置服務(wù)器。自己對(duì)于跨域的理解剛開(kāi)始...

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

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

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

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

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

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

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

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

0條評(píng)論

閱讀需要支付1元查看
<