vue---axios實現數據交互與跨域問題

来源:https://www.cnblogs.com/Sunzz/archive/2019/05/11/10791438.html
-Advertisement-
Play Games

1. 通過axios實現數據請求 vue.js預設沒有提供ajax功能的。 所以使用vue的時候，一般都會使用axios的插件來實現ajax與後端伺服器的數據交互。 註意，axios本質上就是javascript的ajax封裝，所以會被同源策略限制。 下載地址： axios提供發送請求的常用方法有兩 ...


1. 通過axios實現數據請求

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

所以使用vue的時候，一般都會使用axios的插件來實現ajax與後端伺服器的數據交互。

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

下載地址：

https://unpkg.com/[email protected]/dist/axios.js
https://unpkg.com/[email protected]/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: *

總結：

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來請求對應的伺服器介面，獲取到數據以後，

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Cascading Style Sheet
    Cascading Style Sheet CSS（Cascading Style Sheet）即層疊樣式表，簡稱樣式表。要理解層疊樣式表的概念先要理解樣式的概念。樣式就是對網頁中的 元素（字體、段落、圖像、列表等）屬性的整體概括，即描述所有網頁對象的顯示形式（例如，文字的大小、字體、背景及圖像的顏 ...
  • es5繼承和es6類和繼承
    es6新增關鍵字class，代表類，其實相當於代替了es5的構造函數 通過構造函數可以創建一個對象實例，那麼通過class也可以創建一個對象實列 es5中繼承的方式 1原型鏈繼承 2.構造函數繼承 3.組合繼承，融合了上面兩種方式 /* 組合繼承，既能達到對父類屬性的繼承，也能繼承父類原型上的方法 ...
  • JavaScript動態載入script方式引用百度地圖API 拓展---JavaScript的Promise
    上一篇博客JavaScript動態載入script方式引用百度地圖API，Uncaught ReferenceError: BMap is not defined 這篇文章中我接觸到一個新的單詞：Promise，藉此來記錄一下它，引用來源：JS - Promise使用詳解--摘抄筆記 因為現在還不會 ...
  • 2019最新黑鏈代碼expression：隱藏鏈接代碼
    之前有收集了一些主流的隱藏鏈接代碼，最近又發現一種相當牛X的代碼，如下： 源代碼： <div style="position:absolute;left:expression(1-900);top:expression(3-999);">隱藏內容</a></div> 這個代碼中，expression ...
  • JavaScript---動態載入script和style樣式
    一個網頁裡面的內容理解為一個XML或者說網頁本身也就是一個XML文檔，XML文檔都有很特殊的象徵:"標簽"也叫"節點"。 一個基本的網頁格式 這些是最基本的形態，但是其實它省略了最外面的一個標簽<document> 這其實才是它的本來面目（預設把document標簽給省略了）。document.bo ...
  • 如何高效的學習WEB前端
    學習專業知識，不是都靠自己頑強的意志，更多的是需要跟別人交流，重要的就是跟比你強的人交流，加一些氛圍比較好的交流學習群，或者別人的一句話就能讓你茅塞頓開，學技術切記不能閉門造車，學習的大忌。 5.遇到問題搞不清楚，只能百度，然後自己一團糟 遇到問題的時候，不假思索「百度」，但是很多時候我們是浪費了大 ...
  • photoshop正確的打開方式
    首先這邊我先貼一個地址：https://www.adobe.com/cn/products/photoshop.html 安裝軟體，這裡就不贅述了，真的不會，可以百度^_^我當初就是百度的，哈哈 說到PS,作為前端開發的同學，一點都不陌生 前端需要掌握的PS知識，也不是很多 針對頁面佈局，我們前端需 ...
  • 前端之CSS字體和文本類屬性
    一、字體類屬性： 1.字體類型： font-family:字體1,字體2,字體3; 常用寫法： font-family:"微軟雅黑",Arial; 註：a) 多個字體之間用逗號分隔； b）中文字體要放在雙引號中，英文字體由多個單片語成時也要加雙引號； c) 瀏覽器優先識別字體1，如果找不到字體1，識 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類