SyntaxError：在 Angular8 中 JSON.parse 的位置 0 处出现意外的 JSON 标记 U

Question

我只是避免了这个问题，直到最近当我更改以前代码的一些位和部分时，才注意到这个特定的错误。

\n\n

我使用 Angular 8、NodeJS、express 和 mongoose

\n\n

每当我尝试传递特定对象或该对象的一部分时，我都会收到此错误（来自 chrome 控制台）：

\n\n

HttpErrorResponse {headers: HttpHeaders, status: 201, statusText: "Created", url: "http://localhost:3200/users/", ok: false, \xe2\x80\xa6}\nerror: {error: SyntaxError: Unexpected token U in JSON at position 0 at JSON.parse (<anonymous>) at XMLHtt\xe2\x80\xa6, text: "Updated successfully!"}\nheaders: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: \xc6\x92}\nmessage: "Http failure during parsing for http://localhost:3200/users/"\nname: "HttpErrorResponse"\nok: false\nstatus: 201\nstatusText: "Created"\nurl: "http://localhost:3200/users/"\n__proto__: HttpResponseBase\n

\n\n

这是错误对象内部：

\n\n

message: "Unexpected token U in JSON at position 0"\nstack: "SyntaxError: Unexpected token U in JSON at position 0\n    at JSON.parse (<anonymous>)\n    at XMLHttpRequest.onLoad (http://localhost:4200/vendor.js:31668:51)\n    at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:3639:35)\n    at Object.onInvokeTask (http://localhost:4200/vendor.js:94813:33)\n    at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:3638:40)\n    at Zone.runTask (http://localhost:4200/polyfills.js:3407:51)\n    at ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:3720:38)\n    at invokeTask (http://localhost:4200/polyfills.js:4835:18)\n    at XMLHttpRequest.globalZoneAwareCallback (http://localhost:4200/polyfills.js:4872:25)"\n

\n\n

奇怪的是，我得到的状态为 201（“已创建”），并带有该状态的指定文本消息（“更新成功！”）。

\n\n

我不是 100% 确定，但我认为错误源于 Headers 包，在解析正文时，因为我只从客户端收到此错误。

\n\n

这些是我的 NodeJS 包：

\n\n

"dependencies": {\n    "bcrypt": "^3.0.6",\n    "body-parse": "^0.1.0",\n    "client-sessions": "^0.8.0",\n    "connect": "^3.6.6",\n    "cookie-parser": "~1.4.4",\n    "cors": "^2.8.5",\n    "debug": "~2.6.9",\n    "dotenv": "^8.0.0",\n    "express": "~4.16.1",\n    "express-session": "^1.16.1",\n    "express-validator": "^5.3.1",\n    "http-errors": "~1.6.3",\n    "mailgun-js": "^0.22.0",\n    "moment": "^2.24.0",\n    "mongoose": "^5.6.6",\n    "morgan": "~1.9.1",\n    "multer": "^1.4.2",\n    "nodemon": "^1.19.1",\n    "passport": "^0.4.0",\n    "pug": "^2.0.4",\n    "randomstring": "^1.1.5",\n    "session": "^0.1.0",\n    "session-mongoose": "^0.5.2",\n    "util": "^0.12.1"\n  }\n

\n\n

这些是我的 Angular 包（不要介意“*”，我最近遇到了版本问题，版本是最新的稳定版本）

\n\n

 "dependencies": {\n    "@angular/animations": "*",\n    "@angular/cdk": "*",\n    "@angular/cli": "*",\n    "@angular/common": "*",\n    "@angular/compiler": "*",\n    "@angular/core": "^8.2.4",\n    "@angular/forms": "*",\n    "@angular/http": "^7.2.15",\n    "@angular/material": "^8.1.4",\n    "@angular/platform-browser": "*",\n    "@angular/platform-browser-dynamic": "*",\n    "@angular/router": "*",\n    "angular-cc-library": "^1.2.5",\n    "angular-moment": "^1.3.0",\n    "bootstrap": "^4.3.1",\n    "core-js": "^3.2.1",\n    "hammerjs": "^2.0.8",\n    "moment": "^2.24.0",\n    "ng2-search-filter": "^0.5.1",\n    "rxjs": "~6.5.2",\n    "save": "^2.4.0",\n    "tslib": "^1.10.0",\n    "zone.js": "~0.10.2"\n  },\n  "devDependencies": {\n    "@angular-devkit/build-angular": "^0.803.2",\n    "@angular/compiler-cli": "^8.2.4",\n    "@angular/language-service": "^8.2.4",\n    "@types/jasmine": "~3.4.0",\n    "@types/jasminewd2": "~2.0.6",\n    "@types/node": "~12.7.3",\n    "codelyzer": "^5.1.0",\n    "jasmine-core": "~3.4.0",\n    "jasmine-spec-reporter": "~4.2.1",\n    "karma": "~4.3.0",\n    "karma-chrome-launcher": "~3.1.0",\n    "karma-coverage-istanbul-reporter": "^2.1.0",\n    "karma-jasmine": "~2.0.1",\n    "karma-jasmine-html-reporter": "^1.4.2",\n    "protractor": "~5.4.2",\n    "ts-node": "~8.3.0",\n    "tslint": "~5.19.0"\n  }\n

\n\n

这是配置文件服务内的配置文件对象：

\n\n

export class Profile {\n\n    public selectedLanguage: number;  //language index\n    public designer: string;\n    public status: number;\n    public Language: any;\n    public languages = [\n        "EN",\n        "LT",\n        "RU",\n    ]\n\n    constructor() {\n    }\n}\n

\n\n

这是我用来更新语言索引的方法：

\n\n

 sendLanguage() {\n    this.http.put(this.key.key + \'users/\', {\n      selectedLanguage: this.profile.profile.selectedLanguage\n    }, {\n      headers: new HttpHeaders({\'Content-Type\': \'application/json\'}),\n      withCredentials: true\n    }).subscribe(\n      res => {\n        console.log(res);\n        this.profile.LanguageCheck();\n      },\n      err => {\n        console.log(err);\n      }\n    )\n  }\n

\n\n

这是我通过路由调用的模块导出：

\n\n

//user updates himself\nexports.updateSelf = (req, res) => {\n    //validate request\n    if(!req.body){\n        return res.status(400).send({\n            message: "content can not be empty"\n        });\n    };\n    //requesting authorization\n    if(!req.session.user){\n        return res.status(400).send({\n            message: "You are not logged in!"\n        });\n    }\n\n    User.findOneAndUpdate({_id: req.session.user.userID}, {\n        selectedLanguage: req.body.selectedLanguage\n    }, { new: true }).then(user => {\n        if(!user){\n            return res.status(404).send({\n                message: "User not found"\n            });\n        }\n        res.status(201).send("Updated successfully!");\n    })\n    .catch(err => {\n        if(err.kind === \'ObjectId\'){\n            return res.status(404).send({\n                message: "User not found"\n            });\n        }\n        return res.status(500).send({\n            message: "something went wrong while updating the user"\n        });\n    });\n};\n

\n\n

错误本身并不是什么大问题，因为它仍然保存数据，但它仍然困扰着我，因为我找不到它给我解析错误的原因。

\n

Answer 1

您遇到该错误是因为当您的代码需要 json 格式时您正在发送字符串响应

res.status(201).send("Updated successfully!");

所以你可以将代码更改为类似的内容（将一些 json 数据发送回客户端）

res.status(201).send({message: 'Updated successfully'});