无法使用 Angular HttpClient 编辑设置 Post 请求正文我无法进行（放置、删除、发布任何请求，只有得到工作）

Question

我是 Angular 和 Node 的新手，我在 NodeJS 中创建了 Rest 端点，看起来像这样 （更新它有效，但前提是我将请求的标头设置为 application/x-www-form-urlencoded 但请求主体看起来像 {{"roleName":"new role"}: ""} this instaed of {角色名称：“newRole”})

public static routes(app: Application): void {
  app
    .route("/roles")
    .get((req: Request, res: Response) => {
      RoleC.allRoles().then(roles => res.status(200).send(roles));
    })
    .post((req: Request, res: Response) => {
      console.log(req);
      res.status(200).send(req.body);
      // RoleC.addRole(req.body.roleName).then(r => res.status(200).send(r));
    });
}

我正在从一个看起来像这样的 Angular 应用程序发出发布请求

addRole(role: Role) {
  console.log(JSON.stringify(role));
  this.http
    .post(this.baseURL, role)
    .subscribe(e => console.log("r", e), err => console.log("er", err));
}

但问题是我无法在使用邮递员时设置请求的主体，但从角度来看，主体总是空的我什至尝试使用 fetch 但同样的问题甚至尝试设置标头和这样的节点应用程序中的方法

this.app.use(bodyParser.json());
this.app.use(bodyParser.urlencoded({
  extended: false
}));
this.app.all("*", (req: Request, res: Response, next: NextFunction) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Content-Type, Authorization, Content-Length, X-Requested-With"
  );
  next();
});

但是，发出发布请求仍然没有成功，但是，get 请求工作正常，我尝试从 json 占位符 https://jsonplaceholder.typicode.com/posts 向此 URL 发出发布请求它工作正常我无法弄清楚什么是错误，我知道 json 链接有效，因为它会在响应中烘烤请求的主体，如果我不使用 JSON.Stringify，我会收到严重错误，但根据文档应该可以正常工作，但它不会让 get 请求看起来像这样

 Roles(): Observable<object> {
let httpHeaders = new HttpHeaders({
  "Content-Type": "application/json",
  "Access-Control-Allow-Origin": "*"
});
return this.http.get(this.baseURL);

}

如果我在请求中添加 {headers:httpHeader}，我会收到 cors 错误，但如果在没有它的情况下使用它，它工作正常。无法发出删除或发布请求，但它们在邮递员中工作我什至尝试设置内容类型和 Alloe-Acccess 标头，但似乎没有任何工作

这是我提出请求的角度服务

import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Role } from "./../models/role/role";
import { Injectable } from "@angular/core";
import { Subject, Observable } from "rxjs";

@Injectable({
 providedIn: "root"
})
export class RoleService {
readonly baseURL = "http://127.0.0.1:3000/roles";
updateRole: Subject<Role[]> = new Subject<Role[]>();
private roles: Role[] = [];
constructor(private http: HttpClient) {}
get Roles(): Observable<object> {
let httpHeaders = new HttpHeaders({
  "Content-Type": "application/json"
});
return this.http.get(this.baseURL);
}
 getRole(id: number): Role {
 return this.roles[id];
}
addRole(role: Role) {
let httpHeaders = new HttpHeaders({
  "Access-Control-Allow-Headers":
    "Content-Type, Authorization, Content-Length, X-Requested-With",
  "Access-Control-Allow-Origin": "*",
  "Content-Type": "application/json"
});
console.log(JSON.stringify(role));
this.http
  .post(this.baseURL, role, { headers: httpHeaders })
  .subscribe(e => console.log("r", e), err => console.log("er", err));
//this.updateRole.next(this.Roles);
}
}

这是节点代码

import * as express from "express";
import { Request, Response, NextFunction } from "express";
import * as bodyParser from "body-parser";
import IndexRoutes from "./routes/indexRoute";
import TestRoutes from "./routes/testRoute";
import UsersRoutes from "./routes/userRoute";
import RoleRoutes from "./routes/roleRoute";
import DepartmentRoutes from "./routes/department";
import RemunerationRoutes from "./routes/remunerationRouter";
import PayRoutes from "./routes/payRoute";
import FacultyRoutes from "./routes/FacultyRoute";
class App {
public app: express.Application;
constructor() {
this.app = express();
this.config();
IndexRoutes.routes(this.app);
TestRoutes.routes(this.app);
UsersRoutes.routes(this.app);
RoleRoutes.routes(this.app);
DepartmentRoutes.routes(this.app);
FacultyRoutes.routes(this.app);
RemunerationRoutes.routes(this.app);
PayRoutes.routes(this.app);
this.error();
}

 private config(): void {
 this.app.all("*", (req: Request, res: Response, next: NextFunction) => {
  res.header(
    "Access-Control-Allow-Headers",
    "Content-Type, Authorization, Content-Length, X-Requested-With"
  );
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "*");
  next();
});
  this.app.use(bodyParser.json());
}
 private error(): void {
this.app.use((req: Request, res: Response) => {
  res.status(404).send({
    msg: <string>`404 ${req.path} not fount`
  });
});
}
}
export default new App().app;

如果我为获取请求设置标题，即使它会刹车

Answer 1

您不需要对主体进行字符串化，您可以传递对象本身。只需删除 console.log(JSON.stringify(role)); 并尝试。

Answer 2

在您的节点 js 代码中，尝试在您读取传入请求的正文之前放置允许来源中间层部分。这意味着您必须在允许来源部分之后移动正文解析器中间层。对于标题中的角度代码，只需添加内容类型。这是一个猜测，试试这个。也许这会对你有所帮助。

---角码---

const httpOptions = {
headers: new HttpHeaders({
'Content-Type':  'application/json'
  })
};
this.http
  .post(this.baseURL, role,httpOptions )
 .subscribe(e => console.log("r", e), err => console.log("er", err));
 }

Answer 3

1) 如果您的后端是 nodejs，请确保您安装“cors”：

npm install --save cors 
npm install --save @types/cors 
import cors from 'cors';
app.use(cors());

2) 如果您可以阅读您的正文，请确保安装“body-parser”：

npm install --save body-parser 
npm install --save @types/body-parser
import bodyParser , {urlencoded} from 'body-parser';
app.use(bodyParser.json());
app.use(urlencoded({ extended: true }));

如果问题仍然存在，请检查 HttpInterceptor