Angular HttpClient与Spring Controller交互异常排查求助

问题背景 #

Angular应用的HttpClient无法发起请求到已配置好的Spring Controller端点，浏览器控制台无错误请求记录，已验证API URL正确性、CORS配置无误，且排除缓存问题。

核心排查步骤 #

1. 确认缓存逻辑是否拦截请求 #

查看AssetService的getAssets方法，优先从缓存获取数据：

const cachedStoreAssets = this.getFromCache(this.storeAssetsCacheKey);
if (Array.isArray(cachedStoreAssets)) {
    return Promise.resolve(cachedStoreAssets);
}

• 调试验证：在方法开头添加console.log('缓存内容:', cachedStoreAssets)，确认是否命中缓存跳过HTTP请求。
• 临时测试：注释缓存判断逻辑，直接发起请求，验证接口调用是否正常。

2. 检查API URL拼接正确性 #

HttpClientService通过getApiUrl拼接基础地址与接口路径：

public getApiUrl(url: string): string {
    return this.apiUrl + url;
}

• 验证基础地址初始化：在setApiUrl方法中添加console.log('apiUrl已设置:', caller.apiUrl)，确认环境配置的API地址是否正确加载。
• 打印最终请求地址：在HttpClientService.get方法中添加console.log('最终请求URL:', this.getApiUrl(url))，检查拼接后的地址是否匹配Spring端点（如/assets/{organizationId}）。

3. 验证AuthToken有效性与传递 #

SecureHttpClientService的createAuthHeader方法添加Bearer Token：

Authorization: 'Bearer ' + this.authService.getToken(),

• 检查Token状态：在createAuthHeader中打印console.log('当前Token:', this.authService.getToken())，确认Token不为空或过期。
• 模拟请求测试：用Postman携带相同Token直接调用Spring端点，验证接口是否正常返回，排除@PreAuthorize权限拦截导致的无响应问题。

4. 排查Observable转Promise逻辑 #

HttpClientService将Observable转为Promise：

const promise = this.http.get(this.getApiUrl(url), options).toPromise();

• 确认请求触发：在http.get后添加console.log('请求已发起')，验证Promise是否正常初始化。
• 增强错误日志：在AssetService的catch块中添加console.error('请求错误详情:', error)，避免错误被AlertService拦截后无痕迹。

5. 检查调用时机与参数合法性 #

在CreateExternalMovementOrderComponent中，loadAssets调用assetService.getAssets：

• 验证方法触发：在loadAssets开头添加console.log('开始加载资产，storeId:', storeId)，确认方法是否被正确调用。
• 检查参数有效性：打印传入的storeId，确认是合法数字，避免参数错误导致请求未触发。

6. Spring端请求接收排查 #

• 在Spring Controller的getAssets方法开头添加日志：System.out.println("收到资产请求，organizationId: " + organizationId)，确认是否收到请求。
• 开启Spring DEBUG日志级别，查看请求头、参数等详细信息，排查权限或参数解析问题。

代码优化建议 #

1. 缓存逻辑调试优化：开发环境临时禁用缓存，便于调试：

// 开发环境跳过缓存
const isDev = !environment.production;
if (Array.isArray(cachedStoreAssets) && !isDev) {
    return Promise.resolve(cachedStoreAssets);
}

2. URL拼接健壮性提升：避免斜杠重复问题：

public getApiUrl(url: string): string {
    const cleanApiUrl = this.apiUrl.replace(/\/$/, '');
    const cleanUrl = url.replace(/^\/+/, '');
    return `${cleanApiUrl}/${cleanUrl}`;
}

3. 错误处理增强：确保错误向上传递，便于上层捕获：

.catch((error: any) => {
    console.error('资产请求失败:', error);
    this.alertService.error("general.sap_error");
    return Promise.reject(error);
});

内容的提问来源于stack exchange，提问作者J.Klimov