Angular 5中如何区分OPTIONS请求失败与URL格式错误导致的状态码0错误？

当然可以做到！针对你遇到的Angular 5里URL格式错误导致OPTIONS请求失败、状态码为0的问题，我给你两种实用思路，帮你精准区分错误类型并给出不同提示：

状态码为0的网络错误确实包含多种场景，但格式错误的URL引发的OPTIONS失败，和“连接被拒绝”的错误在HttpErrorResponse的嵌套属性里是有差异的。你可以在错误拦截逻辑里，通过解析error对象的细节来区分：

当请求出错时，Angular会返回HttpErrorResponse对象，其中error属性如果是ErrorEvent类型，就包含了浏览器层面的错误详情。你可以通过它的message字段判断错误原因——格式错误的URL通常会带有“Invalid URL”“Failed to parse”这类关键词，而连接被拒绝的错误会包含“Connection refused”“Failed to connect”等描述。

示例代码如下：

import { HttpErrorResponse } from '@angular/common/http';
import { catchError, throwError } from 'rxjs/operators';

// 发起GET请求的示例
this.http.get('your-target-url').pipe(
  catchError((error: HttpErrorResponse) => {
    if (error.status === 0) {
      // 处理状态码为0的错误
      if (error.error instanceof ErrorEvent) {
        const browserError = error.error as ErrorEvent;
        if (browserError.message.includes('Invalid URL') || browserError.message.includes('Failed to parse')) {
          // URL格式错误的情况
          alert('请检查输入的URL格式是否正确！');
        } else if (browserError.message.includes('Connection refused') || browserError.message.includes('Failed to connect')) {
          // 连接被拒绝的情况
          alert('无法连接到服务器，请检查网络或服务器状态！');
        } else {
          // 其他未知的0状态码错误
          alert('发生未知网络错误！');
        }
      }
    }
    // 抛出错误或返回空流，避免Observable流中断
    return throwError(() => error);
  })
).subscribe(
  response => { /* 处理正常响应 */ },
);

注意：不同浏览器的错误消息描述可能略有差异，你可以根据实际测试结果调整关键词匹配的规则，确保覆盖主流浏览器的情况。

更高效的方式是在发送请求之前就校验URL的合法性，这样能直接拦截格式错误的URL，不用等到浏览器发起OPTIONS请求后才报错，用户体验更好。

你可以利用JavaScript原生的URL构造函数来做校验——如果URL格式不合法，new URL(url)会抛出错误，据此我们可以写一个简单的校验函数：

// URL格式校验函数
private isValidUrl(url: string): boolean {
  try {
    // 尝试构造URL对象，失败则说明格式错误
    new URL(url);
    return true;
  } catch (error) {
    return false;
  }
}

// 发起请求前先校验
const targetUrl = 'user-input-url';
if (!this.isValidUrl(targetUrl)) {
  alert('请检查输入的URL格式是否正确！');
} else {
  // 格式合法，发起请求
  this.http.get(targetUrl).pipe(
    catchError((error: HttpErrorResponse) => {
      // 这里处理其他网络错误，比如连接被拒绝
      if (error.status === 0) {
        alert('无法连接到服务器，请检查网络或服务器状态！');
      }
      return throwError(() => error);
    })
  ).subscribe();
}

这种方式能从源头避免格式错误的URL触发后续的请求流程，减少不必要的网络交互，同时也能更清晰地分离错误类型。

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