前端发送axios请求报错Request failed with status code 500解决方案

news2024/11/20 1:32:34

1.报错如下

2.因为后端的api是自己使用node+express搭建的后台,然后要求请求头的参数格式为application/x-www-form-urlencoded的参数格式

打开报错请求

发现自己的请求头参数格式没有错误,jwt的身份验证也通过了,然后使用post测试接口,发现没啥毛病,搞了半天(疯狂百度搜索引擎)

 过了一段时间.......................................................................................................................

在终端再次打开自己的请求参数(playLoad),仔细一看,好像发送的参数并不是参数拼接的

application/x-www-form-urlencoded格式的form-data表单格式,而是json格式,所以后端就无法接受到前端的参数,就报错了

3.解决方案:

 1.qs插件

qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。

2.qs安装

在项目中使用命令行工具输入:npm install qs

安装完成后在需要用到的组件中:import qs from 'qs'

qs.parse()和qs.stringify()区别:

qs.parse()是将URL解析成对象的形式

qs.stringify()是将对象序列化成URL的形式,以&进行拼接,并且转化成form-data格式

解决我遇到的问题我使用了qs.stringify()

报错的请求

const { data: res } = await updateUserAvatar(data)

修改后

// const { data: res } = await updateUserAvatar(qs.stringify(data))

可以看到请求成功:

 数据也变成字符串&拼接的格式:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409042.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JavaScript之Ajax(一篇入门Ajax就够了)

一、概念 1.什么是Ajax Ajax(Asynchronous Javascript And XML),即是异步的JavaScript和XML,Ajax其实就是浏览器与服务器之间的一种异步通信方式 异步的JavaScript 它可以异步地向服务器发送请求,在等待响应的过程…

vue3 + vite中开发环境和生产环境全局变量配置

目录一、开发环境和生产环境二、配置环境变量三、使用全局变量一、开发环境和生产环境 开发环境:也就是编码时运行的环境,即我们使用npm run dev或者npm run serve运行项目到本地时,项目处于的环境。 生产环境:项目部署到服务器…

07. vue3+vite+qiankun搭建微应用前端框架,并接入vue3微应用

目录前言主应用微应用部署前言 因为业务系统接入的需要,决定将一个vue3vitets的主应用系统,改造成基于qiankun的微应用架构。此文记录了改造的过程及vue3微应用接入的种种问题。 网上有很多关于微应用改造的案例,但很多都没写部署之后什么情…

web前端文件上传可选择的4种方式

在web前端开发中,文件上传属于很常见的功能,不论是图片、还是文档等等资源,或多或少会有上传的需求。一般都是从添加文件开始,然后读取文件信息,再通过一定的方式将文件上传到服务器上,以供后续展示或下载使…

WEB核心【记录网站登录人数,记录用户名案例】Cookie技术实现

目录 💂 个人主页: 爱吃豆的土豆🤟 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 🏆人必有所执,方能有所成! &…

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree

当我们拿到一个前端项目的时候,想要把它运行起来,首先是要给它安装依赖,即cd到当前项目根目录下去执行npm install命令,然后有一定几率在终端你会遇到这样的报错: npm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to…

HTML基础————table标签

1.什么是table? table是html中的表格,由tr、td、th元素组成。 tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元 2.可选的属性 属性描述border定义表格的边框cellpadding单元格内内容与单元格边的间距cellspacing单元格…

Vite配置环境变量

Vite配置代码环境变量和 Vue2 的配置差不多,都是依靠 .env 文件夹来实现 详情可到 Vite 官网的环境配置里了解:环境变量和模式 {#env-variables-and-modes} | Vite中文网 一、在src同级下创建 .env.production 生产模式和 .env.development 开发模式两…

基于 vue3 element-plus 的暗黑模式

前言 element-plus2.2.0 已经开始支持暗黑模式了 通过在html标签上添加一个名为 dark 的类来启用 基于 vue3 & element-plus 的项目现在可以方便的添加暗黑模式 一、基本使用 因为是通过在html标签上添加 dark 类,可以自行实现切换 但为了方便切换以及进一…

WEB核心【会话技术】第十五章

目录 💂 个人主页: 爱吃豆的土豆🤟 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 🏆人必有所执,方能有所成! &…

【JavaScript】VUE前端实现微信版录制音频wav格式转化成mp3格式和Base64

一、前言 前端有个需求是要实现一个像微信一样,按住录音,松开发送语音,期间踩了不少坑,特地记录一下,主要用到两个库 js-audio-recorder :负责录制音频,支持的格式只有wav、pcmLAMPjs &#x…

三更Blog项目总结(p1~p40)

文章目录项目创建——多模块开发功能业务逻辑总结热门文章列表分类列表分页文章查询文章详情友链查询登录功能退出登录视频地址:SpringBoot项目实战-前后端分离博客项目-Java项目_哔哩哔哩_bilibili 项目创建——多模块开发 整个系统分为前台模块(blog&…

三步解决微信小程序cdn加速(资源大小超过200k)

刚开始开发小程序的时候,上传代码会遇到这样的问题:图片和音频资源大小超过 200 K 下面是官方建议 【建议】小程序代码包里可以存放一些必要的静态资源(例如tabbar的icon等),不过静态资源体积过大也会影响小程序代码…

运行安装vue3+vite+Ts项目报错,无法加载vite.config.ts文件(failed to load config from D:\XXX\vite.config.ts)

git 上面拉别人的vue3viteTs项目, 安装依赖成功之后运行,出现报错 failed to load config from D:\XXX\vite.config.ts 百度搜索的结果是用 pnpm进行下载 然后卸载node_modules文件进行重新下载,这时候有出现问题 自己的node版本太低。如…

【Node.js+koa--后端管理系统】设计动态发布、修改、查询、删除接口

🍳作者:贤蛋大眼萌,一名很普通但不想普通的程序媛\color{#FF0000}{贤蛋 大眼萌 ,一名很普通但不想普通的程序媛}贤蛋大眼萌,一名很普通但不想普通的程序媛🤳 🙊语录:多一些不为什么的…

级联选择器(el-cascader)动态加载(lazyLoad)实现省市区三级选择

开开心心工作,兢兢业业生活 一、实现省市区级联选择(插件) 1. 需求:实现一个省市区的级联选择器,点击一级,动态加载下一级 那好,我们找个轮子 2. 他山之石(找个轮子) E…

Eclipse配置Tomcat详细教程,其中包含如何使用eclipse+tomcat创建并运行web项目

一:Tomcat的下载官网:Apache Tomcat - Welcome!https://tomcat.apache.org/ 进入官网显示如图所示的界面,在下下载的是Tomcat9.0版本,你可以自己选一款。 点击然后进入下面这个界面: 在下电脑是64位,所以 在下下载的6…

【vue】仿PC端微信制作聊天框

前言 采用(vuevue-routervuexes6stylus) 来实现一个仿PC端微信的小demo,可以使用一个智能api,实现智能对话。欢迎大家对鄙人提出宝贵意见,相互学习讨论,一起进步。 demo地址 源码地址 demo做的是PC版,建议使用电脑预…

我的VUE 学习之路(下)

前言: 在经历过前面在HTML下的VUE相关基础的洗礼后,我们可以动手去做一些事了,此时发现直接通过直接VUE组件方式与之前在HTML不同,首先要“静一静”,细看之下只是对之前的很多写法做了封装。 本文旨在直接上手Vue项目下…

FormData详解

FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式,并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去,本接口和此方法都相当简单直接。如果表单 enctype 属性设为 multipart/form-data ,则会使用表单的 submit(…