多种方法解决前后端报出的SyntaxError: xxx is not valid JSON的问题,比如“[object Object]“ is not valid JSON

news2024/11/20 14:18:10

文章目录

  • 1. 复现问题
  • 2. 分析问题
  • 3. 解决问题
  • 4. 该错误的其他解决方法
  • 5. 文章总结

1. 复现问题


今天启动后端服务,访问knife4j文档时,却报出如下错误:

在这里插入图片描述

于是,按F12打开调试页面板,找到了具体的错误信息,如下所示:

在这里插入图片描述

SyntaxError: Unexpected token 'l', ..."example":[list,from]"... is not valid JSON

如果的你的F12无法打开调试面板,可以参考博文:多种方法解决谷歌(chrome)、edge、火狐等浏览器F12打不开调试面板的问题。

2. 分析问题


SyntaxError: Unexpected token 'l', ..."example":[list,from]"... is not valid JSON表示[list,from]不是一个有效的json

于是,将[list,from]数组粘贴到在线的json工具中,如下所示:

在这里插入图片描述

在线的json工具地址为:https://www.sojson.com/

【注意】上述第二张图中——调试面板的第2行错误信息。 如果不是一个有效的JsonJSON.parse解析在解析该值时,就会报出错误。

而我的代码配置写的正是[list,from],如下图所示:

在这里插入图片描述

3. 解决问题


如果想要让他成为有效的json,可以进行[list,from]修改为["list", "from"],如下图所示:

在这里插入图片描述

于是,将["list", "from"]该值复制到配置文件中,如下图所示:

在这里插入图片描述

【注意】\"是转义符号,如果最外层已存在双引号,里面再引入双引号就需要转义。

此时,重新启动服务,便能正常访问了,如下图所示:

在这里插入图片描述

这是后端该错误的解决方法,如果你是前端报出的错误,可以参考如下解决方法。

4. 该错误的其他解决方法


报出该错误的原因,一般是你写的json有问题。

当然,如果你不确定问题出现在哪里,可以使用在线的json工具查看。

如果你是前端报出的错误,可以参考如下解决方案。

  1. 检查解析json是否有误

假设,前端在取cookie中的user_cookie时,要使用JSON.pase()方法将user_cookie解析为json对象,但在解析时便报出[object Object] is not valid JSON,如下代码所示:

var userCookie = cookie.get("user_cookie");
// 把字符串转换json对象(js对象)
if (userCookie) {
  this.loginInfo = JSON.parse(userCookie);
}

因为,在保存user_cookie时,没有将对象转为字符串,如下代码所示:

//获取返回用户信息,放到cookie里面
cookie.set('user_cookie',this.loginInfo,{domain: 'localhost'})

因而,在保存user_cookie时,需要将对象转为字符串,如下代码所示:

//获取返回用户信息,放到cookie里面
cookie.set("user_cookie", JSON.stringify(this.loginInfo), {domain: "localhost",});
  1. 项目打包中的package.json或者manifest.json出现问题

项目在打包时,报出了Manifest is not valid JSON. Line: 1, column: 1

出现这个问题,一般是因为package.json或者manifest.json文件出了问题,而不要以为是xxx.manifest文件出了问题。

如果你的package.json或者manifest.json代码是网页上复制来的,很容易出现标点符号的错误,比如英文的双引号写成了中文的双引号,而标点符号的错误会导致这个问题。

报错原因也很容易看见,line为行数,column为列或者说是属性,即Line: 1, column: 1表明第一行第一个属性出了问题。

后来发现复制来的json里,双引号居然是中文的,而在记事本看不出来,如下图所示:

在这里插入图片描述

因而,复制好json对象后,最好使用在线的json工具检查下。

  1. 前端请求的数据格式有问题。

如果你使用的是工具类(比如postman)向后端发送请求数据,最好需要先设置请求头 'Content-Type' : 'application/json;charset=utf-8',然后数据用json对象格式,如下图所示:

在这里插入图片描述

比如,前端使用post请求传的参数格式存在问题,有可能导致后端无法解析参数而报出如下错误:

在这里插入图片描述

当然,你如果在js里面,其实不用考虑这个问题,一般axios发送post请求,请求头就是这个格式,传递数据需要是对象格式:

  • vue.js
axios({
   method:'post',
   url:'/api/admin/category',
   data:{name: 'test-data',pid:0}
})

使用Ajax发送,可以这样写,比如ajax.js:

$.ajax({ 
    url: '/api/v1/books', 
    data: JSON.stringify({test: 'test-data'}), 
    dataType: 'json', 
    contentType: 'application/json', 
    type: 'POST' 
});

如果上述方法还未解决你的问题,可以在评论区中留言。

5. 文章总结


如果你对knife4j感兴趣,可以参考博文:https://blog.csdn.net/lvoelife/article/details/128114264

代码是千变万化的,但思想是始终不变的:一般报出这个错误SyntaxError: xxx is not valid JSON,都是我们写的json存在问题。

我们可以根据自己的代码,找出json在哪里写错了,然后对症下药即可。

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

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

相关文章

那些你不得不了解的HTML基础

瞧一瞧,看一看,新鲜的HTML出笼了 目录 一、HTML基本语法(标签) 注释 标题 段落 换行 特殊转义字符 格式化标签 图片 超链接a标签 表格标签 列表标签 表单标签 无语义标签 二、基于上述实现的两个案例 制作一份简历…

vue 之 CSS进行样式穿透的方法(/deep/、::v-deep、>>> 、:deep、额外的全局<style>)

一、简介 在很多vue的组件库 , 如vant,elementUI, iview等都可能自定义一些样式文件,如果我们在项目中引入了样式组件或者通过v-html渲染了数据,然后想要去修改他们内部的某元素的样式, 直接修改样式很可能不起作用,修…

做一个前端网页送给女朋友~轮播图+纪念日

文章目录1. 轮播图框架2. 轮播图大盒子实现1. 盒子及图片的可视化2. 将图片重叠起来并放入轮播图盒子中...相对定位与绝对定位3. 添加左右按钮4. 点击按钮跳转图片5. 鼠标离开图片轮播图按钮隐藏6. 添加小圆点按钮7. 点击小圆点跳转图片并且该小圆点变色8. 自动轮播9. 最后一步…

Vue项目中ESLint配置(VScode)

Vue项目中ESLint配置(VScode) 1.VScode的配置格式化代码 1.1下载eslint插件 1.2配置setting.json 打开左上角文件-首选项-设置,在设置中搜索eslint,点击并翻页到最下面,点击setting.json进行配置: // 值设置为true时…

Springboot Long类型数据太长返回给前端,精度丢失问题 复现、解决

前言 惯例,收到兄弟求救,关于long类型丢失精度的问题: 存在一个初学者不会,就会有第二个初学者不会,所以我出手。 正文 不多说,开搞。 如题, 后端返回的数据 给到 前端, Long类型数…

【Vue】踩坑日记:Scoped下动画无效,曾经以为百利而无一害的Scoped,也有自己的限制

文章目录问题描述解决过程玩味Vue Scoped知识点解决方法问题描述 ​ 在开发的前期,我清晰的记得使用动画完成了图片放大的效果,当时还写了一篇博文 http://t.csdn.cn/lA9aq上了热榜。可是过了几天之后,这个效果居然“失效了”,我…

若依前后端分离新窗口打开页面,如何使用this.$router.resolve解决

若依前后端分离新窗口打开页面this.$router.resolve 欢迎遇到同样问题的同学阅读 例如系统后台要求点击【可视化大屏】菜单,需要打开新窗口显示,但不能影响原窗口显示系统页面,网上查询了一圈都是比较片面的只提到了this.$router.resolve&a…

JS时间戳转换方式

前言 在js中将时间戳转换为常用的时间格式,有三种主要的方式 1、使用JS中已有的函数,例如getFullYear(),getMonth()等,将时间戳直接转换成对应的年月; 2、创建时间过滤器,在其他的页面中直接调用该过滤器,转…

npm install 安装失败常见问题解决办法

安装cnpm npm install -g cnpm --registryhttp://registry.npm.taobao.org安装完之后可以通过cnpm -v 检验是否安装成功。 显示当前的镜像网址 npm get registrycnpm install安装依赖 cnpm install在运行cnpm install 中,你可以会遇到cnpm : 无法加载文件 C:\Us…

微信小程序搜索框实现模糊查询

目录 前言一、概述二、步骤三、效果展示总结前言 主要实现功能,无美化,如需请自设 一、概述 开发工具:微信开发者工具 通过对微信原生组件input绑定事件实现对已获取的列表元素模糊查询的操作 二、步骤 在文件中新建一个goodFilter.wxs文…

THREE.js

电子书网站http://www.webgl3d.cn链接 特定版本three.js下载 github链接:https://github.com/mrdoob/three.js github链接查看所有版本:https://github.com/mrdoob/three.js/releases 选择你需要的版本three.js文件包下载,然后解压即可。…

【node进阶】浅析Koa框架---ejs模板|文件上传|操作mongoDB

✅ 作者简介:一名普通本科大三的学生,致力于提高前端开发能力 ✨ 个人主页:前端小白在前进的主页 🔥 系列专栏 : node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 🍀 学习格言: ☀️ 打不倒你的会使你更强&a…

无法将“node.exe”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。

NodeJS配置相关问题 报错原因路径配置 报错 1.无法将“node.exe”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。 2.终端输入node -v,发出提示:nodejs在cmd提示不是内部或外部命令解决方法 3.终端输入npm -v,发出提示:n…

用jQuery实现轮播图——超简单(代码解释)

先看效果 鼠标悬浮时停止轮播&#xff0c;离开时自动轮播&#xff0c;点下一张小圆点会随着动 直接上代码 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>.wrapper {width: 600px;height: 350…

uniapp 前端获取微信小程序 URL Link (HTTPS调用)

前端基于 uniapp 获取微信小程序 URL Link 短链&#xff0c;适用于短信、邮件、网页、微信内等拉起小程序的业务场景。目前仅针对国内非个人主体的小程序开放。 前言&#xff1a;微信小程序此前可以在小程序管理后台-工具 中直接快捷生成小程序指定页面的 https 短链&#xff…

chrome插件-Web开发者助手 FeHelper

FeHelper是一个非常好用的插件&#xff0c;支持Chrome、Firefox、MS-Edge浏览器&#xff0c;工具集包括 JSON自动/手动格式化、JSON内容比对、代码美化与压缩、信息编解码转换、二维码生成与解码、图片Base64编解码转换、Markdown、 网页油猴、网页取色器、脑图(Xmind)等贴心工…

使用el-upload组件实现递归多文件上传

一、需求描述&#xff1a;在页面上点击按钮弹出选择电脑文件的界面&#xff0c;可以一次性选择多个文件一起上传到服务器上&#xff0c;并把上传成功的文件展示在页面上。 二、问题阐述&#xff1a;el-upload是支持多文件上传的&#xff0c;但是是同步进行的&#xff0c;你点击…

Three.js学习五——让模型沿着轨迹移动

目录流程搭建场景环境添加模型增加运动轨迹让模型沿轨迹运动完整代码和效果流程 基本流程 1、添加模型 2、增加运动轨迹 3、让模型沿轨迹运动 工程文件结构如下图&#xff1a; static&#xff1a;存放静态资源文件 three.js-master&#xff1a;为官网下载的代码包&#xff0c;…

Edge DEV 侧边栏没有Chat的解决办法。

最近陆陆续续又有很多人通过了new bing 的申请&#xff0c;体验时又发现了自己的侧边栏的bing没有chat&#xff0c;现在解决这个问题有一个比较成熟的方案。一.安装mitmproxyWindowsWindows安装建议用官方提供的客户端访问mitmproxy官方网址点击访问mitmproxy - an interactive…

持久化 pinia 状态

pinia的状态与vuex一样把数据存在内存中&#xff0c;在刷新页面后会清理内存&#xff0c;数据会丢失。 要解决这个问题非常简单&#xff0c;在状态改变时将其同步到浏览器的存储中&#xff0c;如 cookie、localStorage、sessionStorage 。 可以搭配 pinia-persistedstate-plu…