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

问题描述：

在本地使用：

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

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

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

 

问题解决：

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

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