post请求设置表单form-data格式的几种方式

最新推荐文章于 2025-04-29 09:54:17 发布

前端老实人

最新推荐文章于 2025-04-29 09:54:17 发布

阅读量1.8w

点赞数 3

分类专栏： Vue3.0 Vue 文章标签： vue.js postman javascript ajax

本文链接：https://blog.youkuaiyun.com/weixin_52691965/article/details/124691838

版权

Vue 同时被 2 个专栏收录

48 篇文章

订阅专栏

26 篇文章

订阅专栏

本文探讨了在使用axios发送默认POST请求时遇到的问题，重点介绍了如何通过配置`Content-Type`和添加请求拦截器将数据转换为form-data格式，确保后端接收。作者提供了两种方法并对比了它们的优缺点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我用默认的post方法发送数据的时候发现后端获取不到数据，然而在network中看到参数是的确传出去的了。而且用postman测试的时候也是可以的，比较了下两个的不同发现是postman使用的是form-data格式，于是用form-data格式再次请求，发现OJBK

这两种格式都是无法使用的：

方法一：配置transformRequest

缺点：其他请求格式的数据也会被重新格式化（PUT，PATCH）

import axios from "axios"  //引入

//设置axios为form-data
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = [function (data) {
    let ret = ''
    for (let it in data) {
      ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
    }
    return ret
}]


//然后再修改原型链
Vue.prototype.$axios = axios

还有这种直接引用的方式：

axios({
   method: 'post',
   url: 'http://localhost:8080/login',
   data: {
      username: this.loginForm.username,
      password: this.loginForm.password
   },
   transformRequest: [
      function (data) {
         let ret = ''
         for (let it in data) {
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
         }
         ret = ret.substring(0, ret.lastIndexOf('&'));
         return ret
      }
    ],
    headers: {
       'Content-Type': 'application/x-www-form-urlencoded'
    }
})

方法二：添加请求拦截器，对症下药（推荐）

所有主要浏览器都支持 encodeURIComponent() 函数

在封装好的axios里添加以下代码：

//添加请求拦截器
axios.interceptors.request.use(
	config => {
		//设置axios为form-data 方法2
		if (config.method === 'post') {
			let data = ''
			for (let item in config.data) {
				if (config.data[item])
					data += encodeURIComponent(item) + '=' + encodeURIComponent(config.data[item]) + '&'
			}
			config.data = data.slice(0, data.length - 1)
		}
		return config;
	},
	error => {
		console.log("在request拦截器显示错误：", error.response)
		return Promise.reject(error);
	}
);

这是现在的格式