当前位置：Gxlcms > JavaScript > Vue使用axios出现options请求方法

Vue使用axios出现options请求方法

时间：2021-07-01 10:21:17 帮助过：28人阅读

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

Ⅰ.需要apache服务，并把php代码丢进去指定位置

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

1.从一段简易代码说起

前端代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Document</title>
  8.   <!-- 导入axios -->
  9.   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  10. </head>
  11. <body>
  12.   <!-- POST 请求 -->
  13.   <form method="post">
  14.     <p>用户名:<input id="username" type="text" name="username" value="admin"> </p>
  15.     <br />
  16.     <p>密　码:<input id="password" type="text" name="password" value="123456"> </p>
  17.     <br />
  18.     <p><input id="btn" type="submit" value="登录" /></p>
  19.   </form>
  20. </body>
  21. <script>
  22.   document.getElementById("btn").onclick = function () {
  23.     //获取用户输入的登录信息
  24.     let username = document.getElementById('username').value;
  25.     let password = document.getElementById('password').value;
  26.     //不处理的数据对象
  27.     let data = {
  28.       username: username,
  29.       password: password
  30.     };
  31.     console.log(data);//{username: "admin", password: "123456"}
  32.     //阻止submit默认行为：表单提交刷新页面
  33.     event.preventDefault();
  34.     //提交请求获取响应数据
  35.     axios.post("http://www.test.com/day05/jiekou.php", data).then(res => {
  36.       console.log(res);
  37.     }).catch(err => {
  38.       console.log(err);
  39.     })
  40.   }
  41. </script>
  42. </html>

php接口代码

  1. <?php
  2. // 制定允许其他域名访问
  3. header("Access-Control-Allow-Origin:*");
  4. // 允许的响应类型
  5. header('Access-Control-Allow-Methods: GET, POST, PUT,DELETE,OPTIONS,PATCH');
  6. // 响应头设置
  7. header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");
  8. // 获取form表单值
  9. $username = $_POST['username'];
  10. $password = $_POST['password'];
  11. // 判断form表单中key
  12. if(isset($_POST['username']) && isset($_POST['password'])){
  13.   // 判断username和password
  14.   if($username == "admin" && $password == "123456"){
  15.     
  16.     $result = array("success" => 1, "code" => 101, "data" => array("username" => $username, "password" => $password));  
  17.   
  18.   }else{
  19.     $result = array("success" => 0, "code" => 103, "data" => null);
  20.   }
  21.   
  22. }else{
  23.   $result = array("success" => 0, "code" => 100, "data" => null);
  24. }
  25. // 将错误信息(数组)转换成json类型,返回前端
  26. echo(json_encode($result));
  27. ?>

结果：运行失败，无法获取响应数据

2.解决：

方法Ⅰ.引入qs模块处理数据:修改上面的html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Document</title>
  8.   <!-- 导入axios -->
  9.   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  10.   <!-- 导入qs -->
  11.   <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
  12. </head>
  13. <body>
  14.   <!-- POST 请求 -->
  15.   <form method="post">
  16.     <p>用户名:<input id="username" type="text" name="username" value="admin"> </p>
  17.     <br />
  18.     <p>密　码:<input id="password" type="text" name="password" value="123456"> </p>
  19.     <br />
  20.     <p><input id="btn" type="submit" value="登录" /></p>
  21.   </form>
  22. </body>
  23. <script>
  24.   document.getElementById("btn").onclick = function () {
  25.     //获取用户输入的登录信息
  26.     let username = document.getElementById('username').value;
  27.     let password = document.getElementById('password').value;
  28.     // 用qs处理数据对象
  29.     //qs的原理：就是将对象转变成字符串拼接到url上再发post请求
  30.     let data = Qs.stringify({
  31.      username: username,
  32.      password: password
  33.     });
  34.     console.log(data);//username=admin&password=123456
  35.     //阻止submit默认行为：表单提交刷新页面
  36.     event.preventDefault();
  37.     //提交请求获取响应数据
  38.     axios.post("http://www.test.com/day05/jiekou.php", data).then(res => {
  39.       console.log(res);
  40.     }).catch(err => {
  41.       console.log(err);
  42.     })
  43.   }
  44. </script>
  45. </html>

方法Ⅱ.后端开放options请求跨域，并用对应的方法获取options提交的复杂数据

  1. <?php
  2. // 制定允许其他域名访问
  3. header("Access-Control-Allow-Origin:*");
  4. // 响应类型
  5. header('Access-Control-Allow-Methods: GET, POST, PUT,DELETE,OPTIONS,PATCH');
  6. // 响应头设置
  7. header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");
  8. //如果是options请求，就结束执行下面语句
  9. if($_SERVER['REQUEST_METHOD']=='OPTIONS'){
  10.   //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并配置方法到原型上

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

在所有的vue实例组件里都可以直接用this.$qs.stringify(要处理的数据)，进行数据转换

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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！