同源策略與CORS跨域

同源策略與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?

1. 使用XMLHttpRequest發送請求
2. 服務器返回json格式的字符串
3. js解析json,並更新局部頁面

面試手寫Ajax

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