用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()
})
})
}