Vue使用axios出现options请求方法

2024-09-27 03:14:20

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

Ⅰ.需要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="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <!-- POST 请求 -->
  <form method="post">
    <p>用户名:<input id="username" type="text" name="username" value="admin"> </p>
    <br />
    <p>密　码:<input id="password" type="text" name="password" value="123456"> </p>
    <br />
    <p><input id="btn" type="submit" value="登录" /></p>
  </form>
</body>
<script>

  document.getElementById("btn").onclick = function () {
    //获取用户输入的登录信息
    let username = document.getElementById('username').value;
    let password = document.getElementById('password').value;
    //不处理的数据对象
    let data = {
      username: username,
      password: password
    };
    console.log(data);//{username: "admin", password: "123456"}
    //阻止submit默认行为：表单提交刷新页面
    event.preventDefault();
    //提交请求获取响应数据
    axios.post("http://www.test.com/day05/jiekou.php", data).then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    })

  }
</script>
</html>

php接口代码

<?php

// 制定允许其他域名访问
header("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));
?>

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

2.解决：

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

<!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="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!-- 导入qs -->
  <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
</head>

<body>
  <!-- POST 请求 -->
  <form method="post">
    <p>用户名:<input id="username" type="text" name="username" value="admin"> </p>
    <br />
    <p>密　码:<input id="password" type="text" name="password" value="123456"> </p>
    <br />
    <p><input id="btn" type="submit" value="登录" /></p>
  </form>
</body>
<script>

  document.getElementById("btn").onclick = function () {
    //获取用户输入的登录信息
    let username = document.getElementById('username').value;
    let password = document.getElementById('password').value;
    // 用qs处理数据对象
    //qs的原理：就是将对象转变成字符串拼接到url上再发post请求
    let data = Qs.stringify({
     username: username,
     password: password
    });
    console.log(data);//username=admin&password=123456
    //阻止submit默认行为：表单提交刷新页面
    event.preventDefault();
    //提交请求获取响应数据
    axios.post("http://www.test.com/day05/jiekou.php", data).then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    })

  }
</script>
</html>

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

<?php

// 制定允许其他域名访问
header("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'])?$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并配置方法到原型上

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

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

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

vue2.0设置proxyTable使用axios进行跨域请求的方法

这里请求的是知乎日报的api,由@izzyleung这位大神提供的,这是github地址. 在vue-cli构建的项目中先安装axios npm install axios -S 这里暂不考虑用vuex封装的方式,只讲在当前组件中直接使用. 先在<script>中引入用prototype将axios添加为vue原生的属性,$ajax相当于axios的别名. 然后在要调用的方法或是钩子中请求,$ajax就是上面注册的axios,如果想直接用axios不想设置prototype也可以直接按官方的
vue使用Axios做ajax请求详解

vue2.0之后,就不再对vue-resource更新,而是推荐使用axios 1. 安装 axios $ npm install axios 或 $ bower install axios 2. 在要使用的文件中引入axios import axios from 'axios' 3. 使用axios做请求可以通过向 axios 传递相关配置来创建请求, 只有 url 是必需的.如果没有指定 method,请求将默认使用 get 方法. { // `url` 是用于请求的服务器 URL url
浅谈在Vue-cli里基于axios封装复用请求

本文介绍了浅谈在Vue-cli里基于axios封装复用请求,分享给大家,具体如下: 安装只用安装一个axios就可以了. npm install axios --save 接口代理设置为了请求可以正常发送,我们一般要进行一个接口代理的配置,这样可以避免请求跨域,项目打包之后,后端一般也要搭建一个nginx之类的东西进行转发请求,不然请求会因为跨域问题失败的. //文件位置:config/index.js proxyTable: { '/api': { target: 'http://47.9
vue axios请求超时的正确处理方法

自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们该如何处理呢? 下面我给你们分享一下我的经历. 具体原因最近公司在做一个项目, 服务端数据接口用的是Php输出的API, 有时候在调用的过程中会失败, 在谷歌浏览器里边显示Provisional headers are shown. 按照搜索引擎给出来的解决方案,解决不了我的问题. 最近在研究AOP这个开发编程的概念,axios开发说明里边提到的栏截器(axios.Inter
vue axios 在页面切换时中断请求方法 ajax

如下所示: Vue.prototype.$ajax=axios; const CancelToken = axios.CancelToken; let cancel; let cancelAjaxText = '中断成功'; Vue.prototype.post = function(url,data,loading){ var ajax = Vue.prototype.$ajax({ method: 'post', url:url, data: data, cancelToken: new C
解决vue2中使用axios http请求出现的问题

使用axios处理post请求时,出现的问题解决默认情况下: axios.post(url, params).then(res => res.data); 当url是远程接口链接时,会报404的错误: Uncaught (in promise) Error: Request failed with status code 404 我们需要实例化一个新的axios,并且设置他的消息头为'content-type': 'application/x-www-form-urlencoded' 于是得出
vue axios登录请求拦截器

当我们在做接口请求时,比如判断登录超时时候,通常是接口返回一个特定的错误码,那如果我们每个接口都去判断一个耗时耗力,这个时候我们可以用拦截器去进行统一的http请求拦截. 1.安装配置axios cnpm install --save axios 我们可以建一个js文件来做这个统一的处理,新建一个axios.js,如下 import axios from 'axios' import { Indicator } from 'mint-ui'; import { Toast } from 'mi
Vue.js实战之使用Vuex + axios发送请求详解

前言 Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 Vuex 的安装将不再赘述,可以参考之前的Vue.js实战之Vuex的入门教程使用 cnpm 安装 axios cnpm install axios -S 安装其他插件的时候,可以直接在 ma
Vue Promise的axios请求封装详解

现在应该大部分公司都是前后端分离了.so,数据请求的封装还是必须的. 为了实现向ios中block封装请求的异步的效果,我采用JavaScript中promise这个对象. var p1 = New promise((resolve,reject)=>{ var timeOut = Math.random() * 2; log('set timeout to: ' + timeOut + ' seconds.'); setTimeout(function () { if (timeOut <
vue axios同步请求解决方案

在vue项目里面,需要循环发送ajax请求,出现的问题就是循环结束,第一次服务器还没返回,导致数据处理错误,需要使用同步请求解决方案目前没有发现axios可以同步请求,所以只能使用jQuery,配置同步请求: $.ajax({ url:'/comm/test1.php', type:'POST', //GET async:false, //或false,是否异步 data:{ name:'yang',age:25 }, timeout:5000, //超时时间 dataType:'json'

Vue使用axios出现options请求方法

相关推荐

随机推荐