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));
?>

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

1.png

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