Vue使用axios出现options请求方法

更新时间：2019年05月30日 10:28:10 作者：陈小坏

这篇文章主要介绍了Vue使用axios出现options请求，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue-router路由该如何使用
这篇文章主要介绍了Vue-router路由该如何使用，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
2021-03-03
浅谈Vue3中key的作用和工作原理
本文主要介绍了Vue3中key的作用和工作原理，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
vue实现选中效果
本文给大家分享的是如何使用vue实现鼠标点击选中的效果，附上了实例代码，有需要的小伙伴可以参考下
2020-10-10
axios实现文件上传并获取进度
这篇文章主要为大家详细介绍了axios实现文件上传并获取进度，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
Vue中使用防抖与节流的方法
这篇文章主要为大家介绍了Vue中使用防抖与节流的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-01-01
vue实现复制文字复制图片实例详解
这篇文章主要为大家介绍了vue实现复制文字复制图片实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
vue中引入图片的方法示例
在我们写vue项目中肯定会用到各种图片,那么如何更好的使用图片资源呢?下面这篇文章主要给大家介绍了关于vue中引入图片的方法,需要的朋友可以参考下
2023-06-06
vue中如何使用vue-touch插件
这篇文章主要介绍了vue中使用vue-touch插件的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-07-07
Vue的watch和computed方法的使用及区别介绍
Vue的watch属性可以用来监听data属性中数据的变化。这篇文章主要介绍了Vue的watch和computed方法的使用及区别,需要的朋友可以参考下
2018-09-09
vue中input type=file上传后@change事件无效的解决方案
这篇文章主要介绍了vue中input type=file上传后@change事件无效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05