Javascript 请求错误。在发出请求后获得了正文（值和名称放错了位置）

几个月以来，我一直是编码新手，我一直在解决一个无法解决的问题：

在我的angular应用程序中，我正在发出post请求（以下用户）：

从'@angular/core'导入{Injectable}；
从“@angular/common/http”导入{HttpClient}
从“rxjs”导入{Observable}；
@注射的({
providedIn:'根'
})
导出类用户服务{
构造函数（私有http:HttpClient）{}
getAllUsers（）：可观察{
返回此.http.get（'http://localhost:8080/chatApp/users')
}
followUser（userfollowUser）：可观察{
log（userfollowered）；
返回此.http.post（'http://localhost:8080/chatApp/follow-用户'{
用户跟踪
});
}
}

userfollowered是包含ID的对象（console.log返回5da24df09a3e662fd437d21b）

然而，当我在我的节点后端接收到这个对象时，我只是简单地将它记录为console.log，如下所示：

followUser（请求、回复）{
console.log（请求主体）；}

我从控制台获得以下信息：

{{“userfollowered”：“5da24df09a3e662fd437d21b”：“}

正如您所看到的，这是一个混乱，我不知道如何修复它（我无法访问我的userfollowerd值）

编辑：followed user是一个简单的对象，正如我在前面的console.log（request.body）中的注释部分所说，我获得了我期望的值：

{userfollowered:“5da24df09a3e662fd437d21b”}

当我在后端和控制台.log（request.body）中获得它时，我获得了

{{“userfollowered:“5da24df09a3e662fd437d21b:”}

编辑2：我把我的全部代码放在下面：

<div class = "container" style = "margin-top : 30px">
  <div  class = "row"> 
    <div class = "col s12 m4 13">
      
     </div>
  
     <div class = "col s12 m8 19">
       <div class = "rox">
         <div class = "col s 12 m6  14 cardDiv" *ngFor = "let user of users">
          <div class = "card">
            <a>
              <div class = "card-image imgDiv">
                <img  class = "imgCircle responsive-img" src = "http://placehold.it/100x100">
              </div>
            </a>
            <div class = "card-action">
              <h3 class = "card-title">
                  {{user.username}}
                  ici sont les username normalement :/
              </h3>
              <p>country</p>

              <button class = "btn" (click)= "followUser(user)">follow</button>
               <!--" need to add this instead of /chat solo-->
              <a class = "secondary-content" [routerLink] = "['/chat', user.username]">
                <i clas = "material-icons">chat</i>
              </a>
            </div>
          </div>
         </div>
       </div>
     </div>
  </div>

编辑3：我的节点如下所示：

const express = require('express');
const bodyParser = require('body-parser');
const logger = require('morgan');
const methodOverride = require('method-override')
const cors = require('cors');
const mysql = require('mysql');
// Token handling : 
const jwt = require('jsonwebtoken');
const config = require('./config/config');
//disk storage :
const multer = require('multer');
// password hashing : 
const bcrypt = require('bcrypt');
const saltRounds = 10;
const dateTime = require ('date-time');
const nodemailer = require('nodemailer');
// ---------------------------------------
const connection = mysql.createConnection({          // a placer dans une variable environnementale

});


var app = express();
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(methodOverride());
app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));

// TUTO PATRICK MONGODB

const mongoose = require('mongoose');
const dbConfig = require ('./config/secret');
const message = require ('./routes/messageRoutes');
const auth = require ('./routes/authRoutes');
const users = require('./routes/userRoutes');
const friends = require ('./routes/friendsRoutes');

mongoose.Promise = global.Promise;
mongoose.connect(
    dbConfig.url,
    { useNewUrlParser : true}
);
app.use ('/chatApp', auth);
app.use('/chatApp', message );
app.use('/chatApp', users);
app.use('/chatApp', friends);

app.use(express.json());

然后是路线：

const express = require('express');
const router = express.Router();
const friendCtrl = require('../controllers/friends.js');
const authHelper = require("../helpers/authHelper");

router.post('/follow-user', authHelper.ProtectedRoutes, friendCtrl.followUser);
module.exports = router;

然后是执行的代码

var User = require('../Models/userModels');
module.exports = {
    followUser (req,res) {
        console.log(req.body);};

---

感谢那些试图帮助我的人，我的HTTP拦截器设置了两次头（application/json和application/x-www-form-urlencoded），导致bodyparserJson和BodyParserUncoded都解析了我的请求，这导致了这个非常奇怪的结果。 错误的代码拦截器：

import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpResponse,
  HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError, from } from 'rxjs';
import { ToastController } from '@ionic/angular';
import {Storage} from '@ionic/storage';
import { switchMap } from 'rxjs/operators';
import {AuthenticationService} from './../services/authentication.service';
@Injectable({
  providedIn: 'root'
})
export class TokenInterceptorService implements HttpInterceptor {



  constructor(public toastController: ToastController, private storage : Storage) {}


  intercept(request: HttpRequest<any>, next: HttpHandler) : Observable<HttpEvent<any>>{
    const TOKEN_KEY ='ACCES_TOKEN';    
    console.log("requete avant",request.body);
     return from(this.storage.get(TOKEN_KEY))
          .pipe(
            switchMap(token => {
              if (token){
              console.log("InterceptedHTTPRequest")
               const headers = request.headers
                        .set('x-access-token', token)
                        .append('Content-Type', 'application/x-www-form-urlencoded'); // application/json instead of application/x-www..., had to use the 2nd one because of CORS blocked in chrome
               const requestClone = request.clone({
                 headers 
                });
                console.log("request interceptée et clonée");
                console.log("request apres",requestClone.body);
              return next.handle(requestClone);
              }
              else {
                return next.handle(request);
              }

              }),
            );

  }
}

import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpResponse,
  HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError, from } from 'rxjs';
import { ToastController } from '@ionic/angular';
import {Storage} from '@ionic/storage';
import { switchMap } from 'rxjs/operators';
import {AuthenticationService} from './../services/authentication.service';
@Injectable({
  providedIn: 'root'
})
export class TokenInterceptorService implements HttpInterceptor {



  constructor(public toastController: ToastController, private storage : Storage) {}


  intercept(request: HttpRequest<any>, next: HttpHandler) : Observable<HttpEvent<any>>{
    const TOKEN_KEY ='ACCES_TOKEN';    
    console.log("requete avant",request.body);
     return from(this.storage.get(TOKEN_KEY))
          .pipe(
            switchMap(token => {
              if (token){
              console.log("InterceptedHTTPRequest")
               const headers = request.headers
                        .append('x-access-token', token)
               const requestClone = request.clone({
                 headers 
                });
                console.log("request interceptée et clonée");
                console.log("request apres",requestClone.body);
              return next.handle(requestClone);
              }
              else {
                return next.handle(request);
              }

              }),
            );

  }
}

导入{
HttpRequest，
HttpHandler，
HttpEvent，
HttpInterceptor，
HttpResponse，
HttpErrorResponse
}来自“@angular/common/http”；
从“rxjs”导入{可观察，投掷者，来自}；
从'@ionic/angular'导入{ToastController}；
从'@ionic/Storage'导入{Storage}；
从“rxjs/operators”导入{switchMap}；
从“/../services/authentication.service”导入{AuthenticationService}；
@注射的({
providedIn:'根'
})
导出类TokenInterceptorService实现HttpInterceptor{
构造函数（公共toastController:toastController，私有存储：存储）{}
拦截（请求：HttpRequest，下一步：HttpHandler）：可观察{
const TOKEN_KEY='ACCES_TOKEN'；
控制台日志（“requete avant”，request.body）；
从（this.storage.get（TOKEN_KEY））返回
.烟斗(
开关映射（令牌=>{
如果（令牌）{
log（“InterceptedHTTPRequest”）
const headers=request.headers
.set（'x-access-token'，token）
.append（'Content-Type'，'application/x-www-form-urlencoded'）；//application/json代替application/x-www…，不得不使用第二个，因为在chrome中阻止了CORS
const requestClone=request.clone({
标题
});
日志（“请求拦截和克隆”）；
log（“requestapres”，requestClone.body）；
返回next.handle（requestClone）；
}
否则{
下一步返回。处理（请求）；
}
}),
);
}
}

修正后的拦截器：

import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpResponse,
  HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError, from } from 'rxjs';
import { ToastController } from '@ionic/angular';
import {Storage} from '@ionic/storage';
import { switchMap } from 'rxjs/operators';
import {AuthenticationService} from './../services/authentication.service';
@Injectable({
  providedIn: 'root'
})
export class TokenInterceptorService implements HttpInterceptor {



  constructor(public toastController: ToastController, private storage : Storage) {}


  intercept(request: HttpRequest<any>, next: HttpHandler) : Observable<HttpEvent<any>>{
    const TOKEN_KEY ='ACCES_TOKEN';    
    console.log("requete avant",request.body);
     return from(this.storage.get(TOKEN_KEY))
          .pipe(
            switchMap(token => {
              if (token){
              console.log("InterceptedHTTPRequest")
               const headers = request.headers
                        .set('x-access-token', token)
                        .append('Content-Type', 'application/x-www-form-urlencoded'); // application/json instead of application/x-www..., had to use the 2nd one because of CORS blocked in chrome
               const requestClone = request.clone({
                 headers 
                });
                console.log("request interceptée et clonée");
                console.log("request apres",requestClone.body);
              return next.handle(requestClone);
              }
              else {
                return next.handle(request);
              }

              }),
            );

  }
}

import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpResponse,
  HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError, from } from 'rxjs';
import { ToastController } from '@ionic/angular';
import {Storage} from '@ionic/storage';
import { switchMap } from 'rxjs/operators';
import {AuthenticationService} from './../services/authentication.service';
@Injectable({
  providedIn: 'root'
})
export class TokenInterceptorService implements HttpInterceptor {



  constructor(public toastController: ToastController, private storage : Storage) {}


  intercept(request: HttpRequest<any>, next: HttpHandler) : Observable<HttpEvent<any>>{
    const TOKEN_KEY ='ACCES_TOKEN';    
    console.log("requete avant",request.body);
     return from(this.storage.get(TOKEN_KEY))
          .pipe(
            switchMap(token => {
              if (token){
              console.log("InterceptedHTTPRequest")
               const headers = request.headers
                        .append('x-access-token', token)
               const requestClone = request.clone({
                 headers 
                });
                console.log("request interceptée et clonée");
                console.log("request apres",requestClone.body);
              return next.handle(requestClone);
              }
              else {
                return next.handle(request);
              }

              }),
            );

  }
}

导入{
HttpRequest，
HttpHandler，
HttpEvent，
HttpInterceptor，
HttpResponse，
HttpErrorResponse
}来自“@angular/common/http”；
从“rxjs”导入{可观察，投掷者，来自}；
从'@ionic/angular'导入{ToastController}；
从'@ionic/Storage'导入{Storage}；
从“rxjs/operators”导入{switchMap}；
从“/../services/authentication.service”导入{AuthenticationService}；
@注射的({
providedIn:'根'
})
导出类TokenInterceptorService实现HttpInterceptor{
构造函数（公共toastController:toastController，私有存储：存储）{}
拦截（请求：HttpRequest，下一步：HttpHandler）：可观察{
const TOKEN_KEY='ACCES_TOKEN'；
控制台日志（“requete avant”，request.body）；
从（this.storage.get（TOKEN_KEY））返回
.烟斗(
开关映射（令牌=>{
如果（令牌）{
log（“InterceptedHTTPRequest”）
const headers=request.headers
.append（'x-access-token'，token）
const requestClone=request.clone({
标题
});
日志（“请求拦截和克隆”）；
log（“requestapres”，requestClone.body）；
返回next.handle（requestClone）；
}
否则{
下一步返回。处理（请求）；
}
}),
);
}
}

评论不用于扩展讨论；这段对话已经结束。也许你可以分享错误的代码以及你是如何纠正的。非常感谢。