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

資訊專欄INFORMATION COLUMN

同源策略與CORS跨域

ninefive / 2039人閱讀

摘要：所以瀏覽器認(rèn)為這是安全的。如果你細(xì)心的話你會(huì)發(fā)現(xiàn)，其實(shí)請(qǐng)求已經(jīng)發(fā)送出去了，你只是拿不到響應(yīng)而已。所以瀏覽器這個(gè)策略的本質(zhì)是，一個(gè)域名的，在未經(jīng)允許的情況下，不得讀取另一個(gè)域名的內(nèi)容。但瀏覽器并不阻止你向另一個(gè)域名發(fā)送請(qǐng)求。

同源策略與CORS跨域

PS:這篇文章是緊接著JSONP原理和Ajax學(xué)習(xí)與理解寫的,有些內(nèi)容是承接了上兩篇文章.
這篇文章只算是我的個(gè)人學(xué)習(xí)筆記,內(nèi)容沒有經(jīng)過精心排版,也沒有認(rèn)真校對(duì)格式,一些錯(cuò)誤請(qǐng)見諒.

用 form , a,img,link,script.都可以跨域發(fā)送請(qǐng)求
但是!
同源策略:只有 協(xié)議+端口+域名 一模一樣才允許發(fā) AJAX 請(qǐng)求.
例如我們向baidu.com發(fā)送Ajax一個(gè)請(qǐng)求


請(qǐng)求成功了,但是報(bào)了一個(gè)錯(cuò)

加載失敗了,
所以,請(qǐng)求發(fā)送出去了,但是拿不到響應(yīng)!

同源策略

只有 協(xié)議+端口+域名 一模一樣才允許發(fā) AJAX 請(qǐng)求

一模一樣一模一樣一模一樣一模一樣一模一樣一模一樣一模一樣一模一樣

http://baidu.com 可以向 http://www.baidu.com 發(fā) AJAX 請(qǐng)求嗎 no
http://baidu.com:80 可以向 http://baidu.com:81 發(fā) AJAX 請(qǐng)求嗎 no
瀏覽器必須保證
只有 協(xié)議+端口+域名 一模一樣才允許發(fā) AJAX 請(qǐng)求

為什么要有同源策略?

為什么form表單提交沒有跨域問題，但ajax提交有跨域問題？ - 方應(yīng)杭的回答 - 知乎

因?yàn)樵?yè)面用 form 提交到另一個(gè)域名之后，原頁(yè)面的腳本無法獲取新頁(yè)面中的內(nèi)容。所以瀏覽器認(rèn)為這是安全的。而 AJAX 是可以讀取響應(yīng)內(nèi)容的，因此瀏覽器不能允許你這樣做。如果你細(xì)心的話你會(huì)發(fā)現(xiàn)，其實(shí)請(qǐng)求已經(jīng)發(fā)送出去了，你只是拿不到響應(yīng)而已。所以瀏覽器這個(gè)策略的本質(zhì)是，一個(gè)域名的 JS ，在未經(jīng)允許的情況下，不得讀取另一個(gè)域名的內(nèi)容。但瀏覽器并不阻止你向另一個(gè)域名發(fā)送請(qǐng)求。

簡(jiǎn)單地說就是使用form發(fā)送請(qǐng)求,就會(huì)刷新頁(yè)面,所以原頁(yè)面沒有了,就認(rèn)為是安全的.但是Ajax可以吧響應(yīng)內(nèi)容讀取了.并且顯示在本頁(yè)面上.出現(xiàn)安全性問題

如果沒有同源策略,那么任何網(wǎng)站都可以讀取別人的支付寶余額等等

CORS 跨域

除了用jsonp之外,可以用CORS

下面我們用兩個(gè)網(wǎng)站來模擬Ajax跨域并且解決跨域問題

先寫前端的Ajax請(qǐng)求代碼

let myButton = document.getElementById("myButton");
myButton.addEventListener("click",(e)=>{
    let request = new XMLHttpRequest();
    request.onreadystatechange = ()=>{
        if(request.readyState ===4){
            console.log("請(qǐng)求和響應(yīng)都完畢了");
            if ( request.status>=200&&request.status<=400){
                console.log("說明請(qǐng)求成功");
                let string = request.responseText;
                //把符合json語法的字符串轉(zhuǎn)化為js對(duì)應(yīng)的值
                let object2 = window.JSON.parse(string);
                console.log(object2)
            }else if(request.status>=400){
                console.log("響應(yīng)失敗");
            }
        } 
    }
    request.open("GET","http://jack.com:8002/xxx")//配置request.請(qǐng)求的路徑為第二個(gè)網(wǎng)站的8002端口
    request.send();//發(fā)送請(qǐng)求
})

服務(wù)器端的代碼

else if (path === "/xxx") {
    response.statusCode = 200
    response.setHeader("Content-Type", "text/xml;charset=utf-8")
    response.write(`
    {
      "note":{
        "from":"mataotao",
        "to":"ni",
      }
    }
    `)
    response.end()
  }

監(jiān)聽兩個(gè)端口,然后用mataotao.com:8001的網(wǎng)站向jack.com:8002網(wǎng)站發(fā)起請(qǐng)求,這就算是跨域發(fā)送請(qǐng)求

點(diǎn)擊點(diǎn)我后:

ajax請(qǐng)求因?yàn)榭缬騿栴}沒有發(fā)送成功!

解決方法

一句代碼:設(shè)置請(qǐng)求頭:

//HTTP訪問控制（CORS）允許來自http://mataotao.com:8001的請(qǐng)求,并給予相應(yīng)
    response.setHeader("Access-Control-Allow-Origin","http://mataotao.com:8001")
else if (path === "/xxx") {
    response.statusCode = 200
    response.setHeader("Content-Type", "text/xml;charset=utf-8")

    //HTTP訪問控制（CORS）允許來自http://mataotao.com:8001的請(qǐng)求,并給予相應(yīng)
    response.setHeader("Access-Control-Allow-Origin","http://mataotao.com:8001")
    
    
    response.write(`
    {
      "note":{
        "from":"mataotao",
        "to":"ni",
      }
    }
    `)
    response.end()
  }

然后重啟jack.com:8002的服務(wù)器,再重新請(qǐng)求一次


成功
CORS 可以告訴瀏覽器，我倆一家的，別阻止他

CORS的意思

突破同源策略 === 跨域

Cross-Origin Resource Sharing
跨域(源,站)資源共享

總結(jié)

CORS相對(duì)于JSONP,CORS可以發(fā)任意請(qǐng)求,而JSONP只能發(fā)送get請(qǐng)求

response.setHeader("Access-Control-Allow-Origin","http://mataotao.com:8001")
這句話是跨域(突破同源策略)的核心,即允許別的網(wǎng)站(例如http://mataotao.com:8001)跨域向我發(fā)請(qǐng)求,并且允許響應(yīng)

Ajax總結(jié)

什么是Ajax?

使用XMLHttpRequest發(fā)送請(qǐng)求

服務(wù)器返回json格式的字符串

js解析json,并更新局部頁(yè)面

面試手寫Ajax


就是這9行代碼
一定要會(huì)!!!

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

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

相關(guān)文章

  • 同源策略與跨域資源共享

    摘要：由于瀏覽器的同源策略導(dǎo)致無法直接通過拿到后臺(tái)數(shù)據(jù)。目前，如果非同源，共有三種行為受到限制。此處應(yīng)有掌聲參考關(guān)于跨域資源共享和瀏覽器的同源策略限制的具體講解。 工作中，經(jīng)常會(huì)遇到需要跨域請(qǐng)求數(shù)據(jù)的情況。由于瀏覽器的同源策略,導(dǎo)致無法直接通過ajax拿到后臺(tái)數(shù)據(jù)。解決這個(gè)問題的方式之一就是JSONP。還有一種方式更高效簡(jiǎn)單——跨域資源共享(Cross-origin Resource Sha...

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

  • 同源策略與跨域資源共享的糾纏

    摘要：扯了這么多，自然不是為了吹水，而是要為了引出前端開發(fā)的一個(gè)重要的知識(shí)點(diǎn)同源策略什么是同源策略出于保護(hù)用戶信息安全的目的，現(xiàn)在的瀏覽器都會(huì)實(shí)施同源策略這個(gè)政策，所謂同源策略指的是不同源的客戶端腳本在沒有明確授權(quán)情況下，不允許讀寫對(duì)方的資源。 導(dǎo)語你家的小孩帶了他的朋友來你們的家里玩，你家的小孩如果要在自家屋里拿玩具玩、拿東西吃你自然是不會(huì)阻止，但是如果你家小孩的朋友人品不行，亂拿東西吃、...

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

  • 同源策略與跨域資源共享的糾纏

    摘要：扯了這么多，自然不是為了吹水，而是要為了引出前端開發(fā)的一個(gè)重要的知識(shí)點(diǎn)同源策略什么是同源策略出于保護(hù)用戶信息安全的目的，現(xiàn)在的瀏覽器都會(huì)實(shí)施同源策略這個(gè)政策，所謂同源策略指的是不同源的客戶端腳本在沒有明確授權(quán)情況下，不允許讀寫對(duì)方的資源。 導(dǎo)語你家的小孩帶了他的朋友來你們的家里玩，你家的小孩如果要在自家屋里拿玩具玩、拿東西吃你自然是不會(huì)阻止，但是如果你家小孩的朋友人品不行，亂拿東西吃、...

    趙連江 評(píng)論0 收藏0

  • JavaScript 的同源策略及其"CORS"跨域方案

    摘要：設(shè)置的值，為其當(dāng)前域或其當(dāng)前域的父域。場(chǎng)景文檔中的一個(gè)腳本執(zhí)行以下語句即可通過同源檢測(cè)跨源網(wǎng)絡(luò)訪問同源策略控制了不同源之間的交互。服務(wù)器確認(rèn)允許之后，才發(fā)起實(shí)際的請(qǐng)求。 文章大綱 同源策略 同源是什么？ 如何跨源，以及場(chǎng)景應(yīng)用 源的更改 跨源網(wǎng)絡(luò)訪問 跨源腳本API訪問 跨源數(shù)據(jù)存儲(chǔ)訪問 了解CORS CORS是什么？ CORS功能概述 CORS關(guān)于Cookie ...

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

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

0條評(píng)論

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