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

資訊專欄INFORMATION COLUMN

同源策略與CORS跨域

ninefive / 2091人閱讀

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

同源策略與CORS跨域

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

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


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

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

同源策略

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

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

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

為什么要有同源策略?

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

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

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

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

CORS 跨域

除了用jsonp之外,可以用CORS

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

先寫前端的Ajax請求代碼

let myButton = document.getElementById("myButton");
myButton.addEventListener("click",(e)=>{
    let request = new XMLHttpRequest();
    request.onreadystatechange = ()=>{
        if(request.readyState ===4){
            console.log("請求和響應(yīng)都完畢了");
            if ( request.status>=200&&request.status<=400){
                console.log("說明請求成功");
                let string = request.responseText;
                //把符合json語法的字符串轉(zhuǎn)化為js對應(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.請求的路徑為第二個(gè)網(wǎng)站的8002端口
    request.send();//發(fā)送請求
})

服務(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ā)起請求,這就算是跨域發(fā)送請求

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

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

解決方法

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

//HTTP訪問控制（CORS）允許來自http://mataotao.com:8001的請求,并給予相應(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的請求,并給予相應(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ù)器,再重新請求一次


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

CORS的意思

突破同源策略 === 跨域

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

總結(jié)

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

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

Ajax總結(jié)

什么是Ajax?

使用XMLHttpRequest發(fā)送請求

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

js解析json,并更新局部頁面

面試手寫Ajax


就是這9行代碼
一定要會!!!

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

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

相關(guān)文章

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

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

    darcrand 評論0 收藏0

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

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

    alighters 評論0 收藏0

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

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

    趙連江 評論0 收藏0

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

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

    maochunguang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<