Vue使用axios出現(xiàn)options請(qǐng)求方法
更新時(shí)間：2019年05月30日 10:28:10 作者：陳小壞
這篇文章主要介紹了Vue使用axios出現(xiàn)options請(qǐng)求，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
以下代碼如果需要在你本地跑起來(lái)：
Ⅰ.需要apache服務(wù)，并把php代碼丟進(jìn)去指定位置
Ⅱ.將下面http://www.test.com/day05/jiekou.php地址，改成自己指定位置的域名或ip
1.從一段簡(jiǎn)易代碼說(shuō)起
前端代碼
<!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>
<!-- 導(dǎo)入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<!-- POST 請(qǐng)求 -->
<form method="post">
<p>用戶(hù)名:<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 () {
//獲取用戶(hù)輸入的登錄信息
let username = document.getElementById('username').value;
let password = document.getElementById('password').value;
//不處理的數(shù)據(jù)對(duì)象
let data = {
username: username,
password: password
};
console.log(data);//{username: "admin", password: "123456"}
//阻止submit默認(rèn)行為：表單提交刷新頁(yè)面
event.preventDefault();
//提交請(qǐng)求獲取響應(yīng)數(shù)據(jù)
axios.post("http://www.test.com/day05/jiekou.php", data).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
}
</script>
</html>
php接口代碼
<?php
// 制定允許其他域名訪問(wèn)
header("Access-Control-Allow-Origin:*");
// 允許的響應(yīng)類(lèi)型
header('Access-Control-Allow-Methods: GET, POST, PUT,DELETE,OPTIONS,PATCH');
// 響應(yīng)頭設(shè)置
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);
}
// 將錯(cuò)誤信息(數(shù)組)轉(zhuǎn)換成json類(lèi)型,返回前端
echo(json_encode($result));
?>
結(jié)果：運(yùn)行失敗，無(wú)法獲取響應(yīng)數(shù)據(jù)
2.解決：
方法Ⅰ.引入qs模塊處理數(shù)據(jù):修改上面的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>
<!-- 導(dǎo)入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 導(dǎo)入qs -->
<script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
</head>
<body>
<!-- POST 請(qǐng)求 -->
<form method="post">
<p>用戶(hù)名:<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 () {
//獲取用戶(hù)輸入的登錄信息
let username = document.getElementById('username').value;
let password = document.getElementById('password').value;
// 用qs處理數(shù)據(jù)對(duì)象
//qs的原理：就是將對(duì)象轉(zhuǎn)變成字符串拼接到url上再發(fā)post請(qǐng)求
let data = Qs.stringify({
username: username,
password: password
});
console.log(data);//username=admin&password=123456
//阻止submit默認(rèn)行為：表單提交刷新頁(yè)面
event.preventDefault();
//提交請(qǐng)求獲取響應(yīng)數(shù)據(jù)
axios.post("http://www.test.com/day05/jiekou.php", data).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
}
</script>
</html>
方法Ⅱ.后端開(kāi)放options請(qǐng)求跨域，并用對(duì)應(yīng)的方法獲取options提交的復(fù)雜數(shù)據(jù)
<?php
// 制定允許其他域名訪問(wèn)
header("Access-Control-Allow-Origin:*");
// 響應(yīng)類(lèi)型
header('Access-Control-Allow-Methods: GET, POST, PUT,DELETE,OPTIONS,PATCH');
// 響應(yīng)頭設(shè)置
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");
//如果是options請(qǐng)求，就結(jié)束執(zhí)行下面語(yǔ)句
if($_SERVER['REQUEST_METHOD']=='OPTIONS'){
//exit是用來(lái)結(jié)束程序執(zhí)行的,如果參數(shù)是字符串，PHP將會(huì)直接把字符串輸出，
//如果參數(shù)是整型（范圍是0-254），那個(gè)參數(shù)將會(huì)被作為結(jié)束狀態(tài)使用。
exit('options類(lèi)型的請(qǐng)求，結(jié)束');
}
//option請(qǐng)求無(wú)法用常規(guī)方法($_GET, $_POST, $_REQUEST)獲取請(qǐng)求參數(shù)
$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);
}
// 將錯(cuò)誤信息(數(shù)組)轉(zhuǎn)換成json類(lèi)型,返回前端
echo(json_encode($result));
?>
小結(jié)：：
Ⅰ.個(gè)人是比較傾向于由后端來(lái)解決（前端還要引入qs插件，沒(méi)什么必要）
Ⅱ.在vue里面使用qs的步驟
➀qs是一個(gè)npm倉(cāng)庫(kù)所管理的包,可通過(guò)npm install qs命令進(jìn)行安裝.
傳送門(mén)[https://www.npmjs.com/package/qs](https://www.npmjs.com/package/qs)
qs.parse()將URL解析成對(duì)象的形式
qs.stringify()將對(duì)象 序列化成URL的形式，以&進(jìn)行拼接（我們大都用到這個(gè)）
➁在全局main.js里引入qs并配置方法到原型上
import qs from 'qs'; Vue.prototype.$qs = qs;
在所有的vue實(shí)例組件里都可以直接用this.$qs.stringify(要處理的數(shù)據(jù))，進(jìn)行數(shù)據(jù)轉(zhuǎn)換
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 解決vue axios跨域 Request Method: OPTIONS問(wèn)題(預(yù)檢請(qǐng)求)
- 解決在Vue中使用axios POST請(qǐng)求變成OPTIONS的問(wèn)題
- Vue的Options用法說(shuō)明
- Vue中的this.$options.data()和this.$data用法說(shuō)明
- Vue axios與Go Frame后端框架的Options請(qǐng)求跨域問(wèn)題詳解
- Vue實(shí)例的對(duì)象參數(shù)options的幾個(gè)常用選項(xiàng)詳解
- vue拖拽組件 vuedraggable API options實(shí)現(xiàn)盒子之間相互拖拽排序
- 詳解Vue的options
相關(guān)文章
computed 計(jì)算屬性是通過(guò)屬性計(jì)算得來(lái)的屬性，watch屬性變化，就會(huì)觸發(fā)監(jiān)聽(tīng)的函數(shù)。下面通過(guò)本文給大家介紹Vue中的 computed 和 watch，感興趣的朋友一起看看吧2018-06-06
看過(guò)很多人講vue的生命周期，但總是被繞的云里霧里，尤其是自學(xué)的同學(xué)，可能js的基礎(chǔ)也不是太牢固，聽(tīng)起來(lái)更是吃力，那我就已個(gè)人之淺見(jiàn)，以大白話(huà)的方式給大家梳理一下，如有不準(zhǔn)確的地方，歡迎指正！2020-12-12
vue點(diǎn)擊按鈕實(shí)現(xiàn)簡(jiǎn)單頁(yè)面的切換
這篇文章主要為大家詳細(xì)介紹了vue點(diǎn)擊按鈕實(shí)現(xiàn)簡(jiǎn)單頁(yè)面的切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
vue項(xiàng)目首屏加載過(guò)慢的一些解決方案
最近碰到vue項(xiàng)目打包上線(xiàn)后,第一次打開(kāi)首頁(yè)后會(huì)出現(xiàn)空白、加載時(shí)間過(guò)長(zhǎng)的情況,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目首屏加載過(guò)慢的一些解決方案,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue配置后臺(tái)接口方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要通過(guò)示例和大家一起淺析一下Vue3的響應(yīng)式原理，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue3有一定幫助，需要的可以參考一下2022-08-08
vue中el-cascader三級(jí)聯(lián)動(dòng)懶加載回顯問(wèn)題解決
本文主要介紹了vue中el-cascader三級(jí)聯(lián)動(dòng)懶加載回顯問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
使用Element實(shí)現(xiàn)表格表頭添加搜索圖標(biāo)和功能
這篇文章主要介紹了使用Element實(shí)現(xiàn)表格表頭添加搜索圖標(biāo)和功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue+element ui el-tooltip動(dòng)態(tài)顯示隱藏問(wèn)題
這篇文章主要介紹了vue+element ui el-tooltip動(dòng)態(tài)顯示隱藏問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
記一次vue去除#問(wèn)題處理經(jīng)過(guò)小結(jié)
這篇文章主要介紹了vue去除#問(wèn)題處理經(jīng)過(guò)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01