Vue使用axios出现options请求方法
(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )
以下代码如果需要在你本地跑起来:
Ⅰ.需要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="/UploadFiles/2021-04-02/axios.min.js">php接口代码
<"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)); "text-align: center">2.解决:
方法Ⅰ.引入qs模块处理数据:修改上面的html代码
上一篇:详解vue 动态加载并注册组件且通过 render动态创建该组件<!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="/UploadFiles/2021-04-02/axios.min.js">方法Ⅱ.后端开放options请求跨域,并用对应的方法获取options提交的复杂数据
<"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'])""; $password = isset($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)); "_blank" href="https://www.npmjs.com/package/qs">https://www.npmjs.com/package/qs)
qs.parse()将URL解析成对象的形式
qs.stringify()将对象 序列化成URL的形式,以&进行拼接(我们大都用到这个)
"htmlcode">
import qs from 'qs'; Vue.prototype.$qs = qs;在所有的vue实例组件里都可以直接用this.$qs.stringify(要处理的数据),进行数据转换
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:vue动态注册组件实例代码详解
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。