Vue使用axios出现options请求方法

前端  /  管理员 发布于 5年前   635

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

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

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

1.从一段简易代码说起

前端代码

                
    
用户名: 
    
    
密　码: 
    
    
  

php接口代码

 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代码

                    
    
用户名: 
    
    
密　码: 
    
    
  

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

 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 项目中的几个实用组件（ts）
• vue-router的使用方法及含参数的配置方法
• Vue实例的对象参数options的几个常用选项详解