Angular调用Web Service返回401未授权，浏览器请求正常求帮助

问题描述 #

我尝试通过Angular应用从Web Service获取信息，直接在浏览器地址栏请求该接口能得到200 OK响应，但通过Angular HttpClient请求时却返回401 Not Authorized，请求帮忙排查。

相关代码 #

Component.ts #

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { MissioniService } from '../services/servizi/missioni.service';

@Component({
  selector: 'app-servizi',
  templateUrl: './servizi.component.html',
  styleUrls: ['./servizi.component.css']
})
export class ServiziComponent implements OnInit {
  obs:Observable<any>;

  constructor(private service:MissioniService) { }

  ngOnInit(): void {
    const host='https://username:password@xmlhostname.com/11428442.xml';
    this.obs = this.service.request(host,{},'GET');
    this.obs.subscribe((data:any) => {
      if(!data.error){
        
      }else{
        alert(data.error);
      }
    });
  }
}

Service.ts #

export class MissioniService {

  constructor(private http:HttpClient) { }

  request = (url:string, parameters:any, method:string): Observable <any>=> {
    return this.http.request(method, url, {
        headers: {
            'Content-Type': 'application/json'
        },
        params: parameters
    }).pipe(
        catchError(error => {
            return error;
        })
    );
  };
}

请求结果对比 #

• Angular应用请求结果：
  
• 浏览器直接请求结果：
  

排查方向与解决办法 #

1. 手动添加Basic Auth请求头 #

浏览器会自动解析URL中的username:password@并生成Authorization: Basic <base64编码值>请求头，但Angular HttpClient不会做这个处理。需要手动添加认证头：

• 对用户名密码进行Base64编码：btoa('username:password')（注意若包含特殊字符，需先做URI编码）
• 在请求头中添加Authorization字段

2. 调整Content-Type头 #

当前请求设置了Content-Type: application/json，但目标接口是XML文件，浏览器直接请求时不会携带该头，可能服务端对该头有校验。建议：

• 移除Content-Type头
• 或改为Content-Type: application/xml

3. 检查跨域预检请求（OPTIONS） #

Angular跨域请求会先发送OPTIONS预检请求，若服务端未允许OPTIONS请求或对其做认证校验，会返回401。需确认服务端配置：

• 允许OPTIONS请求方法
• 不对OPTIONS请求进行权限校验

4. 修正错误处理逻辑 #

当前Service中catchError直接返回error，会导致subscribe无法正确识别错误。建议修改为：

catchError(error => {
    console.error('请求错误详情:', error);
    return throwError(() => error);
})

修改后的Service示例 #

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class MissioniService {

  constructor(private http:HttpClient) { }

  request = (url:string, parameters:any, method:string): Observable <any>=> {
    // 生成Basic Auth头
    const authCredentials = btoa('username:password');
    const headers = {
      'Authorization': `Basic ${authCredentials}`
      // 若需XML类型，添加下面一行
      // 'Content-Type': 'application/xml'
    };

    return this.http.request(method, url, {
        headers: headers,
        params: parameters
    }).pipe(
        catchError(error => {
            console.error('请求错误:', error);
            return throwError(() => error);
        })
    );
  };
}

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