php始终无法接收到axios的数据

用php+vue做项目的时候，发现了一个问题，就是我vue表单数据，没法传给php后端。总共两个大的问题。

第一个看控制台发现是跨域问题，老同伴了

解决方案就是创建一个

Cors.php

<?php
header('Access-Control-Allow-Origin: *');//允许异步请求，可以把 * 设置为固定域名
header("Access-Control-Allow-Methods: HEAD, GET, POST, PUT, PATCH, DELETE, OPTIONS");//请求方式
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method,Access-Control-Request-Headers, Authorization");//允许接收的header头参数 例如:需要传参userid，则需要这里配置一下
header('Content-Type: application/json');
$method = $_SERVER['REQUEST_METHOD'];
if ($method == "OPTIONS") {
    header('Access-Control-Allow-Origin: *');//与上面的同理
    header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method,Access-Control-Request-Headers, Authorization");//与上面的同理
    header("HTTP/1.1 200 OK");
    die();
}
?>

然后导入到存在跨域的地方

include_once "Cors.php";

第二个问题比较隐晦

因为 axios 发送数据时不是以 formData 的形式发送的，而 php 接收的是以 formData 形式的数据。
所以我们只需要把数据在请求之前转换一下就好。

这里我们用到一个工具 qs 只需要 qs.stringfy(data) 即可。
你可以在每次请求时都手动 stringfy 一次，但是这样麻烦。

我们可以直接在 axios 的默认设置中进行这个操作：
axios 可以设置默认配置，可以设置每次请求之前对数据进行处理，字段是 axios.defaults.transformRequest 接收的是数组。

下载qs

 npm install qs

在man.js添加以下内容

// Network request

import qs from 'qs'
import axios from 'axios'

// 设置 axios，把请求数据在这里转换一下，参考官方文档： https://github.com/axios/axios
axios.defaults.transformRequest = [(data, header) => {
  return qs.stringify(data);
}]

// 可以设置全局变量，这样就可以全局通过 this.$axios 使用 axios 了
Vue.prototype.$axios = axios

或者 你也可以自己封装一个方法，在里面自己用 qs 转换一下：

function postData(url, queryData) {
   return new Promise(function (resolve, reject) {
      axios.post(url, qs.stringify(queryData))
         .then(res => {
            if (res.data.success) {
               resolve(res.data)
            } else {
               popMessage(POP_MSG_TYPE.danger, res.data.info )
            }
         }).catch(() => {
         reject()
      })
   })
}