使用Promise.all发起20个请求时出现CORS及503错误求助

嘿，这个问题我熟！我之前用RandomUser API的时候也踩过类似的坑，咱们一步步来解决：

首先得搞明白：你看到的No 'Access-Control-Allow-Origin'提示其实是个“次生问题”，真正的根源是RandomUser API的请求频率/并发限制——短时间内发太多请求（超过4个）会触发服务端限流，返回503状态码，而限流响应里没带上CORS头，所以浏览器把它当成跨域错误抛出来了。

下面给你几个靠谱的解决办法，按优先级排序：

1. 一次性请求20条数据（最优解，强烈推荐） #

完全没必要循环发20次请求！RandomUser API支持通过URL参数直接返回多条结果，只需要加个?results=20就行，一行代码搞定：

// 替换你原来的循环逻辑，这一行就够了
this.http.get<any>('https://randomuser.me/api/?results=20')
  .subscribe({
    next: (response) => {
      const users = response.results; // 这里直接拿到20条用户数据
      // 接下来处理你的业务逻辑就行
    },
    error: (err) => console.error('请求出错:', err)
  });

这个方案既避免了限流，又减少了网络请求的开销，绝对是最优选择。

2. 若必须分批请求（应急方案） #

如果是特殊场景下必须分批发请求，那一定要控制请求频率，给请求加间隔延迟，避免触发API的限流机制：

const requestPromises: Promise<any>[] = [];

// 每个请求间隔500ms发送，降低并发量
for (let i = 0; i < 20; i++) {
  const delayedPromise = new Promise((resolve) => {
    setTimeout(() => {
      this.http.get<any>('https://randomuser.me/api/')
        .toPromise()
        .then(resolve);
    }, i * 500); // 递增延迟，避免同时发送所有请求
  });
  requestPromises.push(delayedPromise);
}

// 等待所有请求完成
Promise.all(requestPromises)
  .then((responses) => {
    const users = responses.map(res => res.results[0]);
    // 处理收集到的用户数据
  })
  .catch((error) => {
    console.error('部分请求失败:', error);
  });

3. 了解API的官方限制 #

免费版的RandomUser API有明确的请求频率限制，如果你需要更高的请求量级，可以关注他们的付费方案，但对于大多数场景来说，一次性获取多条数据已经完全够用了。

最后再提醒一句：浏览器的跨域提示有时候会“带偏”思路，遇到这类问题先看响应状态码（比如这里的503），先排查服务端的限流/错误，再看跨域配置~

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