vue---axios實現資料互動與跨域問題

Sunzz發表於2019-05-11
VueiOS跨域

1. 通過axios實現資料請求

vue.js預設沒有提供ajax功能的。

所以使用vue的時候，一般都會使用axios的外掛來實現ajax與後端伺服器的資料互動。

注意，axios本質上就是javascript的ajax封裝，所以會被同源策略限制。

下載地址：

https://unpkg.com/axios@0.18.0/dist/axios.js
https://unpkg.com/axios@0.18.0/dist/axios.min.js

axios提供傳送請求的常用方法有兩個：axios.get() 和 axios.post() 。

增 post

刪 delete

改 put

查 get

    // 傳送get請求
    // 引數1: 必填，字串，請求的資料介面的url地址，例如請求地址：http://www.baidu.com?id=200
    // 引數2：可選，json物件，要提供給資料介面的引數
    // 引數3：可選，json物件，請求頭資訊
    axios.get('伺服器的資源地址',{ // http://www.baidu.com
        params:{
            引數名:'引數值', // id: 200,
        }
    
    }).then(function (response) { // 請求成功以後的回撥函式
            console.log("請求成功");
            console.log(response);
    
    }).catch(function (error) {   // 請求失敗以後的回撥函式
            console.log("請求失敗");
            console.log(error.response);
    });

    // 傳送post請求，引數和使用和axios.get()一樣。
    // 引數1: 必填，字串，請求的資料介面的url地址
    // 引數2：必填，json物件，要提供給資料介面的引數,如果沒有引數，則必須使用{}
    // 引數3：可選，json物件，請求頭資訊
    axios.post('伺服器的資源地址',{
        username: 'xiaoming',
        password: '123456'
    },{
        responseData:"json",
    })
    .then(function (response) { // 請求成功以後的回撥函式
      console.log(response);
    })
    .catch(function (error) {   // 請求失敗以後的回撥函式
      console.log(error);
    });

    
    // b'firstName=Fred&lastName=Flintstone'

1.1 json

json是 JavaScript Object Notation 的首字母縮寫，單詞的意思是javascript物件表示法，這裡說的json指的是類似於javascript物件的一種資料格式。

json的作用：在不同的系統平臺，或不同程式語言之間傳遞資料。

1.1.1 json資料的語法

json資料物件類似於JavaScript中的物件，但是它的鍵對應的值裡面是沒有函式方法的，值可以是普通變數，不支援undefined，值還可以是陣列或者json物件。

// json資料的物件格式：
{
    "name":"tom",
    "age":18
}

// json資料的陣列格式：
["tom",18,"programmer"]

複雜的json格式資料可以包含物件和陣列的寫法。

{
  "name":"小明",
  "age":200,
  "fav":["code","eat","swim","read"],
  "son":{
    "name":"小小明",
    "age":100,
    "lve":["code","eat"],
  }
}

// 陣列結構也可以作為json傳輸資料。

json資料可以儲存在.json檔案中，一般裡面就只有一個json物件。

總結：

1. json檔案的字尾是.json
2. json檔案一般儲存一個單一的json資料
3. json資料的屬性不能是方法或者undefined，屬性值只能：數值、字串、json和陣列
4. json資料只使用雙引號、每一個屬性成員之間使用逗號隔開，並且最後一個成員沒有逗號。
   {
      "name":"小明",
      "age":200,
      "fav":["code","eat","swim","read"],
      "son":{
        "name":"小小明",
        "age":100
      }
    }

工具：postman可以用於測試開發的資料介面。

1.1.2 js中提供的json資料轉換方法

javascript提供了一個JSON物件來操作json資料的資料轉換.

方法 引數 返回值 描述
stringify json物件 字串 json物件轉成字串
parse 字串 json物件 字串格式的json資料轉成json物件 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // json語法
    let humen = {
        "username":"xiaohui",
        "password":"1234567",
        "age":20
    };

    console.log(humen);
    console.log(typeof humen);

    // JSON物件提供對json格式資料的轉換功能
    // stringify(json物件)  # 用於把json轉換成字串
    let result = JSON.stringify(humen);
    console.log(result);
    console.log(typeof result);

    // parse(字串型別的json資料)  # 用於把字串轉成json物件
    let json_str = '{"password":"1123","age":20,"name":"xiaobai"}';
    console.log(json_str)
    console.log(typeof json_str)

    let json_obj = JSON.parse(json_str);
    console.log(json_obj);
    console.log(typeof json_obj)

    console.log(json_obj.age)
</script>
</body>
</html>

1.2 ajax

ajax，一般中文稱之為："阿賈克斯"，是英文 “Async Javascript And Xml”的簡寫，譯作：非同步js和xml資料傳輸資料。

ajax的作用： ajax可以讓js代替瀏覽器向後端程式傳送http請求，與後端通訊，在使用者不知道的情況下運算元據和資訊，從而實現頁面區域性重新整理資料/無重新整理更新資料。

所以開發中ajax是很常用的技術，主要用於操作後端提供的資料介面，從而實現網站的前後端分離。

ajax技術的原理是例項化js的XMLHttpRequest物件，使用此物件提供的內建方法就可以與後端進行資料通訊。

1.2.1 資料介面

資料介面，也叫api介面，表示後端提供運算元據/功能的url地址給客戶端使用。

客戶端通過發起請求向服務端提供的url地址申請運算元據【操作一般：增刪查改】

同時在工作中，大部分資料介面都不是手寫，而是通過函式庫/框架來生成。

1.2.3 ajax的使用

ajax的使用必須與服務端程式配合使用，但是目前我們先學習ajax的使用，所以暫時先不涉及到服務端python程式碼的編寫。因此，我們可以使用別人寫好的資料介面進行呼叫。

jQuery將ajax封裝成了一個函式$.ajax()，我們可以直接用這個函式來執行ajax請求。

介面 地址
天氣介面 http://wthrcdn.etouch.cn/weather_mini?city=城市名稱
音樂介面搜尋 http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=歌曲標題
音樂資訊介面 http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.song.play&songid=音樂ID

編寫程式碼獲取介面提供的資料：

jQ版本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
    $(function(){
        $("#btn").on("click",function(){
            $.ajax({
                // 後端程式的url地址
                url: 'http://wthrcdn.etouch.cn/weather_mini',
                // 也可以使用method，提交資料的方式，預設是'GET'，常用的還有'POST'
                type: 'get', 
                dataType: 'json',  // 返回的資料格式，常用的有是'json','html',"jsonp"
                data:{ // 設定傳送給伺服器的資料，如果是get請求，也可以寫在url地址的?後面
                    "city":'北京'
                }
            })
            .done(function(resp) {     // 請求成功以後的操作
                console.log(resp);
            })
            .fail(function(error) {    // 請求失敗以後的操作
                console.log(error);
            });
        });
    })
    </script>
</head>
<body>
<button id="btn">點選獲取資料</button>
</body>
</html>

vue版本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="city">
        <button @click="get_weather">點選獲取天氣</button>
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                city:"",
            },
            methods:{
                get_weather(){
                    // http://wthrcdn.etouch.cn/weather_mini?city=城市名稱
                    axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
                        .then(response=>{
                            console.log(response);

                        }).catch(error=>{
                            console.log(error.response)
                    });
                }
            }
        })
    </script>
</body>
</html>

總結：

1. 傳送ajax請求，要通過$.ajax()，引數是物件，裡面有固定的引數名稱。
   $.ajax({
     "url":"資料介面url地址",
     "method":"http請求方式，前端只支援get和post",
     "dataType":"設定伺服器返回的資料格式，常用的json，html，jsonp，預設值就是json",
     // 要傳送給後端的資料引數，post時，資料必須寫在data，get可以寫在data,也可以跟在位址列?號後面
     "data":{
       "資料名稱":"資料值",
     }
   }).then(function(resp){ // ajax請求資料成功時會自動呼叫then方法的匿名函式
     console.log( resp ); // 服務端返回的資料
   }).fail(function(error){ // ajax請求資料失敗時會自動呼叫fail方法的匿名函式
     console.log( error );
   });
   
2. ajax的使用往往配合事件/鉤子操作進行呼叫。

jQuery還提供了$.get 和 $post簡寫$.ajax的操作。

// 傳送get請求
// 引數1：資料介面的請求地址
// 引數2：傳送給介面地址的資料引數
// 引數3：ajax請求成功以後，呼叫的匿名函式，匿名函式的第一個引數還是服務端返回的資料
// 引數4：設定服務端返回的資料格式，告訴給jQuery
$.get("test.php", { "func": "getNameAndTime" },
   function(data){
     alert(data.name); // John
     console.log(data.time); //  2pm
   }, "json");

// 傳送post請求
// 引數1：資料介面的請求地址
// 引數2：傳送給介面地址的資料引數
// 引數3：ajax請求成功以後，呼叫的匿名函式，匿名函式的第一個引數還是服務端返回的資料
// 引數4：設定服務端返回的資料格式，告訴給jQuery
$.post("test.php", { "func": "getNameAndTime" },
   function(data){
     alert(data.name); // John
     console.log(data.time); //  2pm
   }, "json");

1.2.4 同源策略

同源策略，是瀏覽器為了保護使用者資訊保安的一種安全機制。所謂的同源就是指代通訊的兩個地址（例如服務端介面地址與瀏覽器客戶端頁面地址）之間比較，是否協議、域名(IP)和埠相同。不同源的客戶端指令碼[javascript]在沒有明確授權的情況下，沒有許可權讀寫對方資訊。

ajax本質上還是javascript，是執行在瀏覽器中的指令碼語言，所以會被受到瀏覽器的同源策略所限制。

前端地址：http://www.oldboy.cn/index.html 是否同源 原因
http://www.oldboy.cn/user/login.html 是 協議、域名、埠相同
http://www.oldboy.cn/about.html 是 協議、域名、埠相同
https://www.oldboy.cn/user/login.html 否 協議不同 ( https和http )
http:/www.oldboy.cn:5000/user/login.html 否 埠 不同( 5000和80)
http://bbs.oldboy.cn/user/login.html 否 域名不同 ( bbs和www )

同源策略針對ajax的攔截，程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
    <div id="app">
        <button @click="get_music">點選獲取天氣</button>
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{},
            methods:{
                get_music(){
                    axios.get("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=我的中國心")
                        .then(response=>{
                            console.log(response);

                        }).catch(error=>{
                            console.log(error.response)
                    });
                }
            }
        })
    </script>
</body>
</html>

上面程式碼執行錯誤如下：

Access to XMLHttpRequest at 'http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=%E6%88%91%E7%9A%84%E4%B8%AD%E5%9B%BD%E5%BF%83' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

上面錯誤，關鍵詞：Access-Control-Allow-Origin

只要出現這個關鍵詞，就是訪問受限。出現同源策略的攔截問題。

1.2.5 ajax跨域(跨源)方案之CORS

​ CORS是一個W3C標準，全稱是"跨域資源共享"，它允許瀏覽器向跨源的後端伺服器發出ajax請求，從而克服了AJAX只能同源使用的限制。

​ 實現CORS主要依靠後端伺服器中響應資料中設定響應頭資訊返回的。

django的檢視

def post(request):

​ response = new Response()

​ response .set_header("Access-Control-Allow-Origin","*")

​ return response;

// 在響應行資訊裡面設定以下內容：
Access-Control-Allow-Origin: ajax所在的域名地址

Access-Control-Allow-Origin: www.oldboy.cn  # 表示只允許www.oldboy.cn域名的客戶端的ajax跨域訪問

// * 表示任意源，表示允許任意源下的客戶端的ajax都可以訪問當前服務端資訊
Access-Control-Allow-Origin: *

vue---axios實現資料互動與跨域問題

總結：

0. 同源策略：瀏覽器的一種保護使用者資料的一種安全機制。
   瀏覽器會限制指令碼語法不能跨源訪問其他源的資料地址。
   同源：判斷兩個通訊的地址之間，是否協議，域名[IP]，埠一致。
   
   ajax：  http://127.0.0.1/index.html
   api資料介面：  http://localhost/index
   
   這兩個是同源麼？不是同源的。是否同源的判斷依據不會根據電腦來判斷，而是通過協議、域名、埠的字串是否來判斷。
   
1. ajax預設情況下會受到同源策略的影響，一旦受到影響會報錯誤如下：
     No 'Access-Control-Allow-Origin' header is present on the requested resource

2. 解決ajax只能同源訪問資料介面的方式：
   1. 在服務端的響應行中設定：
      Access-Control-Allow-Origin: 允許訪問的域名地址
   2. jsonp
   3. 是否服務端代理
      思路：通過python來請求對應的伺服器介面，獲取到資料以後，

相關文章