Vue使用axios出现options请求方法

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

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

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