Angular 4发送POST请求遇Http响应错误，设responseType为'text'仍报错

我帮你梳理下这个问题的解决思路，在Angular 4里遇到这种情况，大概率是错误回调的处理方式不对，或者responseType的配置有细节没注意到，下面一步步来解决：

1. 确认responseType的正确配置 #

首先要确保你在POST请求的选项里正确设置了responseType，不同的Http模块（HttpClient vs 旧Http）写法略有区别：

如果你用的是HttpClient（Angular 4推荐使用） #

在myservice.ts里的请求方法要这么写，注意类型断言的小技巧，避免TypeScript编译报错：

import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';

@Injectable()
export class MyService {
  constructor(private http: HttpClient) {}

  sendPostRequest(url: string, requestBody: any) {
    const headers = new HttpHeaders({
      'Content-Type': 'application/json' // 根据你的实际请求格式调整，比如form-data
    });

    return this.http.post(url, requestBody, {
      headers,
      responseType: 'text' as 'json' // 这里的类型断言是必须的，绕开默认的json类型限制
    }).subscribe(
      (successResponse) => {
        // 正常响应的处理逻辑
        console.log('正常响应HTML:', successResponse);
      },
      (error: HttpErrorResponse) => {
        // 重点：错误时获取服务器返回的HTML
        if (error.status >= 400) {
          // 服务器返回非2xx状态码时，error.error就是HTML正文
          const errorHtml = error.error;
          console.log('错误响应HTML:', errorHtml);
          // 这里可以把errorHtml传递给组件，用于页面展示
        } else {
          // 客户端侧的错误
          console.error('请求出错:', error.message);
        }
      }
    );
  }
}

如果你用的是旧版Http模块（@angular/http） #

如果你的项目还在使用旧的Http模块，写法要调整成这样：

import { Http, Headers, Response } from '@angular/http';

@Injectable()
export class MyService {
  constructor(private http: Http) {}

  sendPostRequest(url: string, requestBody: any) {
    const headers = new Headers({
      'Content-Type': 'application/json'
    });

    return this.http.post(url, requestBody, {
      headers,
      responseType: 'text'
    })
    .map((res: Response) => res.text())
    .subscribe(
      (successResponse) => {
        console.log('正常响应HTML:', successResponse);
      },
      (error: any) => {
        // 旧模块中调用error.text()获取HTML正文
        const errorHtml = error.text();
        console.log('错误响应HTML:', errorHtml);
      }
    );
  }
}

2. 在页面中安全展示HTML #

如果你要把获取到的HTML展示在页面上，直接用插值表达式{{}}会把HTML转义成文本，所以要使用Angular的[innerHTML]属性。另外，为了避免XSS安全风险，建议用DomSanitizer处理一下：

在组件中：

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { MyService } from './myservice';

@Component({
  selector: 'app-root',
  template: '<div [innerHTML]="safeErrorHtml"></div>'
})
export class AppComponent {
  safeErrorHtml: SafeHtml;

  constructor(private myService: MyService, private sanitizer: DomSanitizer) {}

  ngOnInit() {
    this.myService.sendPostRequest('/api/your-endpoint', {}).add(() => {
      // 假设在service里把errorHtml传递到组件，这里简化处理
      // 实际可以通过Subject或者回调把errorHtml传过来
      // this.safeErrorHtml = this.sanitizer.bypassSecurityTrustHtml(errorHtml);
    });
  }
}

3. 额外注意事项 #

• 确保服务器返回的响应头Content-Type是text/html或者text/plain，这样Angular才能正确把响应解析为文本格式。
• 如果服务器返回的是500、404这类错误状态码，Angular会直接进入错误回调，这时候不要慌，error.error（HttpClient）或者error.text()（旧Http）就是你要的HTML内容。

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