Angular内存Web API POST空请求体报错，如何无需修改请求解决？

我完全懂你这种不想为了测试改业务代码的心情——毕竟这个POST只是个心跳请求，根本不需要带任何请求体。下面给你几个不用动实际业务代码就能解决报错的办法：

方案1：用Angular HTTP拦截器自动转换null请求体 #

你可以创建一个全局拦截器，在请求发送到In Memory Web API之前，把null的请求体替换成空对象{}。这样实际业务代码还是发送null，但测试环境里会自动适配：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class NullBodyInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // 只针对POST请求且请求体为null的情况处理
    if (request.method === 'POST' && request.body === null) {
      const modifiedRequest = request.clone({ body: {} });
      return next.handle(modifiedRequest);
    }
    return next.handle(request);
  }
}

然后在你的根模块（比如AppModule）里注册这个拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { NullBodyInterceptor } from './path-to-interceptor/null-body.interceptor';

@NgModule({
  // ...其他模块配置
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: NullBodyInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

方案2：自定义In Memory Web API服务跳过检查 #

如果你不想用全局拦截器，可以直接扩展In Memory的服务，重写POST请求的处理逻辑，要么把null转成空对象，要么针对心跳接口直接返回成功：

方式A：全局转换null请求体 #

import { InMemoryDbService, RequestInfo } from 'angular-in-memory-web-api';
import { Observable } from 'rxjs';

export class CustomInMemoryDbService implements InMemoryDbService {
  createDb() {
    // 这里放你的mock数据，如果没有可以返回空对象
    return {};
  }

  post(reqInfo: RequestInfo): Observable<any> {
    // 把null请求体替换成空对象
    if (reqInfo.req.body === null) {
      reqInfo.req.body = {};
    }
    // 调用默认的POST处理逻辑
    return reqInfo.utils.post(reqInfo);
  }
}

方式B：针对心跳接口单独处理 #

如果你的心跳接口有固定路径（比如/api/heartbeat），可以直接跳过默认的id检查，直接返回成功响应：

post(reqInfo: RequestInfo): Observable<any> {
  // 匹配你的心跳接口路径
  if (reqInfo.req.url.includes('/api/heartbeat')) {
    return reqInfo.utils.createResponse$(() => ({
      body: { status: 'heartbeat received' }, // 可选返回内容
      status: 200
    }));
  }
  // 其他POST请求走默认逻辑
  return reqInfo.utils.post(reqInfo);
}

最后记得在模块里注册这个自定义服务，替换默认的InMemoryDbService：

import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { CustomInMemoryDbService } from './path-to-service/custom-in-memory-db.service';

@NgModule({
  imports: [
    // ...其他导入
    HttpClientInMemoryWebApiModule.forRoot(CustomInMemoryDbService)
  ]
})
export class AppModule { }

方案3：配置In Memory Web API的passThruUnknownUrl（可选） #

如果你的心跳接口不在In Memory的mock路由里，可以开启passThruUnknownUrl配置，让In Memory直接放行这个请求（不过这适用于你不需要mock这个心跳接口的情况）：

HttpClientInMemoryWebApiModule.forRoot(CustomInMemoryDbService, {
  passThruUnknownUrl: true
})

这样In Memory会忽略它不认识的接口，直接让请求“透传”过去，不过如果你的测试环境完全依赖In Memory，这个方案可能不适用。

内容的提问来源于stack exchange，提问作者aks94