Vue使用axios出現options請求方法

來源：懂視網責編：小采時間：2020-11-27 21:55:51

Vue使用axios出現options請求方法

Vue使用axios出現options請求方法:以下代碼如果需要在你本地跑起來： Ⅰ.需要apache服務，并把php代碼丟進去指定位置 Ⅱ.將下面http://www.test.com/day05/jiekou.php地址，改成自己指定位置的域名或ip 1.從一段簡易代碼說起前端代碼 <!DOCTYPE html>

推薦度：

點擊下載本文 文檔為doc格式

導讀Vue使用axios出現options請求方法:以下代碼如果需要在你本地跑起來： Ⅰ.需要apache服務，并把php代碼丟進去指定位置 Ⅱ.將下面http://www.test.com/day05/jiekou.php地址，改成自己指定位置的域名或ip 1.從一段簡易代碼說起前端代碼 <!DOCTYPE html>

以下代碼如果需要在你本地跑起來：

Ⅰ.需要apache服務，并把php代碼丟進去指定位置

Ⅱ.將下面http://www.test.com/day05/jiekou.php地址，改成自己指定位置的域名或ip

1.從一段簡易代碼說起

前端代碼

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <!-- 導入axios -->
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
 <!-- POST 請求 -->
 <form method="post">
 <p>用戶名:<input id="username" type="text" name="username" value="admin"> </p>
 <br />
 <p>密　碼:<input id="password" type="text" name="password" value="123456"> </p>
 <br />
 <p><input id="btn" type="submit" value="登錄" /></p>
 </form>
</body>
<script>

 document.getElementById("btn").onclick = function () {
 //獲取用戶輸入的登錄信息
 let username = document.getElementById('username').value;
 let password = document.getElementById('password').value;
 //不處理的數據對象
 let data = {
 username: username,
 password: password
 };
 console.log(data);//{username: "admin", password: "123456"}
 //阻止submit默認行為：表單提交刷新頁面
 event.preventDefault();
 //提交請求獲取響應數據
 axios.post("http://www.test.com/day05/jiekou.php", data).then(res => {
 console.log(res);
 }).catch(err => {
 console.log(err);
 })

 }
</script>
</html>

php接口代碼

<?php

// 制定允許其他域名訪問
header("Access-Control-Allow-Origin:*");
// 允許的響應類型
header('Access-Control-Allow-Methods: GET, POST, PUT,DELETE,OPTIONS,PATCH');
// 響應頭設置
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");

// 獲取form表單值
$username = $_POST['username'];

$password = $_POST['password'];

// 判斷form表單中key
if(isset($_POST['username']) && isset($_POST['password'])){
 // 判斷username和password
 if($username == "admin" && $password == "123456"){
 
 $result = array("success" => 1, "code" => 101, "data" => array("username" => $username, "password" => $password)); 
 
 }else{
 $result = array("success" => 0, "code" => 103, "data" => null);
 }
 
}else{
 $result = array("success" => 0, "code" => 100, "data" => null);
}
// 將錯誤信息(數組)轉換成json類型,返回前端
echo(json_encode($result));
?>

結果：運行失敗，無法獲取響應數據

2.解決：

方法Ⅰ.引入qs模塊處理數據:修改上面的html代碼

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <!-- 導入axios -->
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <!-- 導入qs -->
 <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
</head>

<body>
 <!-- POST 請求 -->
 <form method="post">
 <p>用戶名:<input id="username" type="text" name="username" value="admin"> </p>
 <br />
 <p>密　碼:<input id="password" type="text" name="password" value="123456"> </p>
 <br />
 <p><input id="btn" type="submit" value="登錄" /></p>
 </form>
</body>
<script>

 document.getElementById("btn").onclick = function () {
 //獲取用戶輸入的登錄信息
 let username = document.getElementById('username').value;
 let password = document.getElementById('password').value;
 // 用qs處理數據對象
 //qs的原理：就是將對象轉變成字符串拼接到url上再發post請求
 let data = Qs.stringify({
 username: username,
 password: password
 });
 console.log(data);//username=admin&password=123456
 //阻止submit默認行為：表單提交刷新頁面
 event.preventDefault();
 //提交請求獲取響應數據
 axios.post("http://www.test.com/day05/jiekou.php", data).then(res => {
 console.log(res);
 }).catch(err => {
 console.log(err);
 })

 }
</script>
</html>

方法Ⅱ.后端開放options請求跨域，并用對應的方法獲取options提交的復雜數據

<?php

// 制定允許其他域名訪問
header("Access-Control-Allow-Origin:*");
// 響應類型
header('Access-Control-Allow-Methods: GET, POST, PUT,DELETE,OPTIONS,PATCH');
// 響應頭設置
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");

//如果是options請求，就結束執行下面語句
if($_SERVER['REQUEST_METHOD']=='OPTIONS'){
 //exit是用來結束程序執行的,如果參數是字符串，PHP將會直接把字符串

輸出， //如果參數是整型（范圍是0-254），那個參數將會被作為結束狀態使用。 exit('options類型的請求，結束'); } //option請求無法用常規方法($_GET, $_POST, $_REQUEST)獲取請求參數 $option_data_str = file_get_contents("php://input"); $option_data = json_decode($option_data_str,true); $username = isset($option_data['username'])?$option_data['username']:""; $password = isset($option_data['password'])?$option_data['password']:""; // 判斷form表單中key if(isset($username) && isset($password)){ // 判斷username和password if($username == "admin" && $password == "123456"){ $result = array("success" => 1, "code" => 101, "data" => array("username" => $username, "password" => $password)); }else{ $result = array("success" => 0, "code" => 103, "data" => null); } }else{ $result = array("success" => 0, "code" => 100, "data" => null); } // 將錯誤信息(數組)轉換成json類型,返回前端 echo(json_encode($result)); ?>

小結：：

Ⅰ.個人是比較傾向于由后端來解決（前端還要引入qs插件，沒什么必要）

Ⅱ.在vue里面使用qs的步驟

➀qs是一個npm倉庫所管理的包,可通過npm install qs命令進行安裝.

傳送門[https://www.npmjs.com/package/qs](https://www.npmjs.com/package/qs)

qs.parse()將URL解析成對象的形式

qs.stringify()將對象序列化成URL的形式，以&進行拼接（我們大都用到這個）

➁在全局main.js里引入qs并配置方法到原型上

import qs from 'qs';
Vue.prototype.$qs = qs;

在所有的vue實例組件里都可以直接用this.$qs.stringify(要處理的數據)，進行數據轉換

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Vue使用axios出現options請求方法

推薦度：

點擊下載本文 文檔為doc格式

標簽：方法 VUE 請求

熱門焦點

Vue使用axios出現options請求方法

Vue使用axios出現options請求方法

Vue使用axios出現options請求方法

最新推薦

猜你喜歡

熱門推薦