开发者问题收集

(TypeError:无法读取 HttpHeaders.applyUpdate 中为 null 的属性“length”)Angular 5,Http 客户端

2017-11-16
24160

我在服务中发出 http 请求时收到此响应。

这是 Login 组件

export class LoginComponent {
  credentials: Credentials;

  constructor(
    private auth: AuthService,
    @Inject(UserService) private userService: UserService,
    @Inject(HttpClient) private http: HttpClient,
    private auth0: Auth0Service
  ) {}

  onLogin(credentials) {
    const sendReq = this.userService.login(credentials);
}

我在 App.module 中的提供程序中添加了 UserService

这是 UserService

@Injectable()
export class UserService {
  constructor(
    @Inject(Auth0Service) private authService: Auth0Service,
    protected http: HttpClient // @Inject(HttpClient) protected http: HttpClient
  ) {}
  login(credentials): Observable<any> {
    console.log(credentials);
    console.log(credentials.username);
    this.http
      .post("http://localhost:3000/api/Users/login", {
        username: credentials.username,
        password: credentials.password
      })
      .subscribe(
        data => {
          console.log(data);
        },
        err => {
          console.log("Something went wrong!");
          console.log(err);
        }
      );
    return credentials;
    // this.auth.login(credentials);
  }
}

这是控制台

    at MergeMapSubscriber._innerSub (mergeMap.js:138)
    user.service.ts:14 
{username: "hamzakpt", password: "hamza"}
    user.service.ts:15
 hamzakpt
    user.service.ts:26 Something went wrong!

    user.service.ts:27
 TypeError: Cannot read property 'length' of null
        at HttpHeaders.applyUpdate (http.js:308)
        at eval (http.js:255)
        at Array.forEach (<anonymous>)
        at HttpHeaders.init (http.js:255)
        at HttpHeaders.forEach (http.js:354)
        at Observable.eval [as _subscribe] (http.js:2153)
        at Observable._trySubscribe (Observable.js:172)
        at Observable.subscribe (Observable.js:160)
        at subscribeToResult (subscribeToResult.js:23)
        at MergeMapSubscriber._innerSub (mergeMap.js:138)

相同的获取请求在 LoginComponent 中有效,但在 UserService 中无效。 UserService 是全局服务,而 Login 位于不同的模块中。

我还在 app.module 和 Login Module 中添加了 HTTPClientModule。

2个回答

请勿在标头中设置空值

问题: 此问题可能是由于标头中的空值而发生的,即

cloned = req.clone({
    headers: req.headers.append('token', token) // i.e. token is null
})

解决方案: 要解决此问题,请在设置到标头之前检查变量,即

if (token) {
    cloned = req.clone({
        headers: req.headers.append('token', token)
    })
}
WasiF
2019-10-08

像这样尝试:

service.ts

login(credentials): Observable<any> {
    return this.http.post("http://localhost:3000/api/Users/login", {
        username: credentials.username,
        password: credentials.password
    }).map(data => data.json())
}

component.ts

onLogin(credentials) {
    this.userService.login(credentials)
        .subscribe(data => {
            console.log('data', data);
        }, (error) => {
            console.log('error', error);
        })
}
Chandru
2017-11-16