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版代码高亮
Jun 26 Javascript
jquery解决图片路径不存在执行替换路径
Feb 06 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
详解vue2 $watch要注意的问题
Sep 08 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
JavaScript实现随机点名器实例详解
May 07 Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 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高级对象构建 工厂模式的使用
2012/02/05 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
three.js 入门案例详解
2018/01/23 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
python脚本爬取字体文件的实现方法
2017/04/29 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
C#面试常见问题
2013/02/25 面试题
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
复核员上岗演讲稿
2014/01/05 职场文书
业务内勤岗位职责
2014/04/30 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
长城导游词
2015/01/30 职场文书
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android
Python find()、rfind()方法及作用
2022/12/24 Python