axios 提交post参数, 后端php没接收到

1,081 阅读1分钟

显示问题

php 代码:

image.png

postman: image.png

浏览器调试器 - post 传值: image.png

浏览器调试器 - 预览里数据: image.png

问题分析

通过 Chrome 控制台,查看请求 Headers 参数,通过 axios 发送的POST请求,请求Headers与普通的 form 表单提交的请求头 Headers不同。
(1) 通过Chrome控制台,查看请求Headers参数,Form Data 部分如下:

{"hid":2259,"type_id":134,"fl":1}

点击 “view source” 查看源码,提交参数还是json格式:

{"hid":2259,"type_id":134,"fl":1}

(2) 正常的form表单提交,Form Data参数应该是这样的: 问题出在axios 的 headers 的Content-Type

hid: 2259
type_id: 134
fl: 1

点击 “view source” 查看源码,是一个字符串形式:

hid=2259&type_id=134&fl=1

这是因为,axios 默认是使用 payload 形式提交是数据,而 jQuery 则默认使用 form 表单提交的数据。而通过 payload 形式的数据 PHP $_POST 无法接受到。

解决办法

import Qs from 'qs';

var axiosAjax = axios.create({
    baseURL:'/',
    // <---- 这里使用 qs 转换参数
    transformRequest: [function (data) { // 转换数据
        data = Qs.stringify(data); // 通过Qs.stringify转换为表单查询参数
        return data;
    }],
    headers:{
        'Content-Type':'application/x-www-form-urlencoded' // 必须设置当前的格式
    }
})

qs可通过npm install qs命令进行安装,是一个npm仓库所管理的包。

npm install qs

而qs.stringify()将对象 序列化成URL的形式,以&进行拼接。

JSON是正常类型的JSON,请对比一下输出

var a = {name:'hehe',age:10};
 qs.stringify(a)
// 'name=hehe&age=10'
JSON.stringify(a)
// '{"name":"hehe","age":10}'*************************************************

效果

image.png

image.png