同源策略與CORS跨域

ninefive 發布于2019-08-23 10:34 / 2029人閱讀

摘要：所以瀏覽器認為這是安全的。如果你細心的話你會發現，其實請求已經發送出去了，你只是拿不到響應而已。所以瀏覽器這個策略的本質是，一個域名的，在未經允許的情況下，不得讀取另一個域名的內容。但瀏覽器并不阻止你向另一個域名發送請求。

同源策略與CORS跨域

PS:這篇文章是緊接著JSONP原理和Ajax學習與理解寫的,有些內容是承接了上兩篇文章.
這篇文章只算是我的個人學習筆記,內容沒有經過精心排版,也沒有認真校對格式,一些錯誤請見諒.

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

請求成功了,但是報了一個錯

加載失敗了,
所以,請求發送出去了,但是拿不到響應!

同源策略

只有協議+端口+域名一模一樣才允許發 AJAX 請求

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

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

為什么要有同源策略?

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

因為原頁面用 form 提交到另一個域名之后，原頁面的腳本無法獲取新頁面中的內容。所以瀏覽器認為這是安全的。而 AJAX 是可以讀取響應內容的，因此瀏覽器不能允許你這樣做。如果你細心的話你會發現，其實請求已經發送出去了，你只是拿不到響應而已。所以瀏覽器這個策略的本質是，一個域名的 JS ，在未經允許的情況下，不得讀取另一個域名的內容。但瀏覽器并不阻止你向另一個域名發送請求。

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

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

CORS 跨域

除了用jsonp之外,可以用CORS

下面我們用兩個網站來模擬Ajax跨域并且解決跨域問題

先寫前端的Ajax請求代碼

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

服務器端的代碼

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()
  }

監聽兩個端口,然后用mataotao.com:8001的網站向jack.com:8002網站發起請求,這就算是跨域發送請求

點擊點我后:

ajax請求因為跨域問題沒有發送成功!

解決方法

一句代碼:設置請求頭:

//HTTP訪問控制（CORS）允許來自http://mataotao.com:8001的請求,并給予相應
    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的請求,并給予相應
    response.setHeader("Access-Control-Allow-Origin","http://mataotao.com:8001")
    
    
    response.write(`
    {
      "note":{
        "from":"mataotao",
        "to":"ni",
      }
    }
    `)
    response.end()
  }

然后重啟jack.com:8002的服務器,再重新請求一次

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

CORS的意思

突破同源策略 === 跨域

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

總結

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

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

Ajax總結

什么是Ajax?

使用XMLHttpRequest發送請求

服務器返回json格式的字符串

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

面試手寫Ajax

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

云服務器 GPU云服務器同源策略 linux安全策略與實例 linux安全策略與實例下載 linux安全策略與實例pdf

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96473.html

同源策略與跨域資源共享

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

darcrand 2019-08-22 18:08 評論0 收藏0
同源策略與跨域資源共享的糾纏

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

alighters 2019-08-21 11:17 評論0 收藏0
同源策略與跨域資源共享的糾纏

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

趙連江 2019-06-27 15:05 評論0 收藏0
JavaScript 的同源策略及其"CORS"跨域方案

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

maochunguang 2019-08-23 15:42 評論0 收藏0