ajax与axios请求头Content-Type的问题

冷不防 2023-02-18 03:02 9阅读 0赞

我在开发中遇到一个问题，我用vue+wepack+axios来开发一个项目，但是后端用的是很久很旧的技术，在调试接口的时候后台要求我传的请求头是Content-Type="application/x-www-form-urlencoded;charset=UTF-8"的格式，但是参数是对象格式传过去，如果用ajax设置这个头部是没问题的，但是用axios请求头是Content-Type="application/x-www-form-urlencoded;charset=UTF-8"的时候请求的参数变成了字符串的形式，具体情况看下面图片：

###   ** ajax设置请求头Content-Type="application/x-www-form-urlencoded;charset=UTF-8"的参数格式：** ###

**  **![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70][]

** axios设置请求头Content-Type="application/x-www-form-urlencoded;charset=UTF-8"的参数格式：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 1][]

但是，后台想我用frorm-Data,又想我传的是跟ajax的参数格式一样，但是我现在是用了axios，所以我们当时调了几个小时都没有调通，后来我就用了一个插件来传换，下面是我解决的方法：

首选：npm install qs,

然后引入，

![20200615152239138.png][]

再者用它包住整个参数：

![202006151523420.png][]

有一个data对象，这个也要JSON.stringify() 传换， 不过这要看后台需求的数据结构吧！要不就是下面这样：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 2][]

#  ================================================ #

# ** 如果你是新手想学前端可以加我，** #

# **如果你是一个有基础，但学习前端没有明确的方向，可以加我** #

# **如果你刚毕业找到前端的工作，但工作上遇到问题或怕遇到问题解决不了的可以加我** #

# **一对一私人指导/教学（费用很便且）：微信：** #

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdmVyc2lvbmxp_size_15_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200615151848370.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200615151946434.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ==,size_16,color_FFFFFF,t_70
[20200615152239138.png]: https://img-blog.csdnimg.cn/20200615152239138.png
[202006151523420.png]: https://img-blog.csdnimg.cn/202006151523420.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200615152839548.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdmVyc2lvbmxp_size_15_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/8debe5c2c82c46ddb44b69f8199304c6.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAdmVyc2lvbmxp,size_15,color_FFFFFF,t_70,g_se,x_16