vue中的axios.post数据传输问题

叁歲伎倆 2022-04-23 01:26 343阅读 0赞

问题描述：

在本地使用：

>     axios.post(url, params).then(res => res.data);

进行表单数据提交时，没有任何问题，但是在进行远程端口的提交时，出现报错，如下：

>     Uncaught (in promise) Error: Request failed with status code 404

![axios-post.JPG][]

问题解决：

问题主要归结于两个方面：

1、axios默认的提交headers: \{'content-type’: ‘application/json; charset=UTF-8'\}，使得提交的数据格式没法进行post提交；

2、在前端进行数据请求的时候post的url格式出错。

解决方案：

1、实例化axios，更改请求的headers,前端代码如下：

>     var instance = axios.create({
>         headers: {'content-type':'application/x-www-form-urlencoded'}
>     });
>     let params = {
>     	blogContent:this.blogEdit,
>     }
>     
>     instance.post("/blogInsertApi/",qs.stringify(params)).then((res)=>{
>         console.log(res);
>         alert("post success")
>     });

其中的qs是数据格式转化插件，采用 cnpm install ps --save 安装，并引入到项目中 var qs = require('qs') 或者 import qs from 'qs'

补充说明：qs.stringify()和qs.parse()

> qs.parse()将URL解析成对象的形式    
> qs.stringify()将对象 序列化成URL的形式，以&进行拼接

后端代码再对取得的数据进行qs.parse()转码成熟悉的json进行储存：

>     router.post("/",function(req, res, next){
>     	let blogContent = req.body;
>     	blogContent = qs.parse(blogContent)；
>     }）

2、第二个问题的出现主要还是因为自己编程习惯造成的，在使用post请求的时候URL要以/结尾；

这个问题真的很难发现，排查了半天，以后要时刻注意！！！

多多指教！！！

原文链接：[https://www.cqz21.top/DetailTemp/5c238fd73f9c02744d655667/Js][https_www.cqz21.top_DetailTemp_5c238fd73f9c02744d655667_Js]

[axios-post.JPG]: /images/20220323/102b85e669594cbcb15d11e26b8656fa.png
[https_www.cqz21.top_DetailTemp_5c238fd73f9c02744d655667_Js]: https://www.cqz21.top/DetailTemp/5c238fd73f9c02744d655667/Js