Vue使用axios出现options请求方法


Posted in Javascript onMay 30, 2019

以下代码如果需要在你本地跑起来:

Ⅰ.需要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));
?>

结果:运行失败,无法获取响应数据

Vue使用axios出现options请求方法

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(要处理的数据),进行数据转换

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript的public、private和privileged模式
Dec 28 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
jQuery中:hidden选择器用法实例
Dec 30 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
微信小程序上传图片到服务器实例代码
Nov 07 Javascript
JS中的BOM应用
Feb 02 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
js实现转动骰子模型
Oct 24 Javascript
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Jun 15 Javascript
vue动态注册组件实例代码详解
May 30 #Javascript
实用的Vue开发技巧
May 30 #Javascript
vue-router的两种模式的区别
May 30 #Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 #Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 #Javascript
全面分析JavaScript 继承
May 30 #Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 #Javascript
You might like
用PHP函数解决SQL injection
2006/10/09 PHP
PHP array_multisort()函数的使用札记
2011/07/03 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
jQuery前端分页示例分享
2015/02/10 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
python判断windows系统是32位还是64位的方法
2015/05/11 Python
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
python五子棋游戏的设计与实现
2019/06/18 Python
使用Python实现分别输出每个数组
2019/12/06 Python
Python标准库itertools的使用方法
2020/01/17 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
耐克中国官方商城:Nike中国
2018/10/18 全球购物
营销与策划个人求职信
2013/09/22 职场文书
大一新生学期自我评价
2014/04/09 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
增员口号大全
2014/06/18 职场文书
公司外出活动方案
2014/08/14 职场文书
付款证明模板
2015/06/19 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android
Python内置数据结构列表与元组示例详解
2021/08/04 Python