09. ajax跨域問題,同源策略

時間 2019-11-17

標籤 ajax 問題同源策略欄目 Ajax 简体版

原文原文鏈接

有三個標籤容許跨域加載資源

能夠作防盜鏈圖片功能

前端使用jsonp實現原理

後端設置http header

手動編寫一個ajax

var xhr= new XMLHttpRequest()
xhr.open('GET','/api',false)
xhr.onreadystatechange=function(){
    //這裏的函數異步執行,可參考以前js基礎中的異步模塊
    if(xhr.readyState==4){
        if(xhr.status==200){
            alert(xhr.responseText)
        }
    }
}
xhr.send(null)

若是同頁面，使用iframe的跨域問題,

cross-origin

服務端增長

response.addHeader("Access-Control-Allow-Origin", "http://write.blog.csdn.net");

後端處理能夠寫cors

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
    // 面試題：什麼是跨域？解決跨域的辦法有哪些？
    /*
      1.同源策略
       - 瀏覽器安全策略
       - 協議名、域名、端口號必須徹底一致
       
      2.跨域
       -違背同源策略就會產生跨域
       
      3.解決跨域
       jsonp、cors、服務代理...
       (前端)     （後端）

    */
    //建立script標籤
    var script=document.createElement('script');

    //設置回調函數
    function getDate(data){
        console.log(data);
    }

    //設置script 的src屬性，設置請求地址

    script.src='http://localhost:3000?callback=getDate';
    
    //讓script生效
    document.body.appendChild(script);
</script>
</body>
</html>

ajax的傳輸方式

若是要處理 $.ajax() 獲得的數據，則須要使用回調函數：beforeSend、error、dataFilter、success、complete

跨域問題，Ajax返回值有哪幾個

1xx 信息提示

2xx成功

3xx重定向

200,請求成功

206,請求內容局部成功

4xx客戶端

404未找到

400,客戶端請求語法錯誤,通常是鏈接地址不對.

5xx服務端