Angular CORS 问题 - 每 5 秒查询一次端点

Question

我有一个 Angular 应用程序，它每 5 秒查询一次节点/express 后端端点。但是，有时我会遇到 cors 错误。

用例

1. 用户创建交易。事务被添加到数据库中，状态为“待处理”
2. 前端会定期查询数据库，直到状态更新为“已完成”。所以它可以检索结果。

角度

我每 5 秒执行一次 http 获取请求

   const url = 'https://<removed>.com/api/v1/transactions/' + transactionId;

    interval(5000)
        .pipe(
            switchMap(() => this.httpClient.get(url)),
            tap((response: any) => {
                this.summary = response;
            }),
            takeWhile((response: any) => response.data['status'] !== 'Completed'),
    ).subscribe();

}

第一个请求很好，然后我在下一个请求时收到以下错误。

加载失败 https://"".com/api/v1/transactions/f3debad2-a830-4168-9a03-475389dae7e0： 请求中不存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://localhost:4200” 使用权。响应的 HTTP 状态代码为 502。

跨域读取阻塞 (CORB) 阻止了跨域响应 https://"".com/api/v1/transactions/f3debad2-a830-4168-9a03-475389dae7e0 MIME 类型为 text/html。看 https://www.chromestatus.com/feature/5629709824032768 了解更多 详情。

这只是有时会发生，其他时候我可以通过 200 个响应发出尽可能多的请求。

节点

我在后端设置了 CORS。

  app.use(cors());

注意

我不确定这是否是一个完整的服务器端问题。这是一个随机的边缘情况。我的所有其他 API 请求（包括 POST 请求）都可以正常工作。

实际上，在它开始间隔 5 秒检查结果是否准备好之前，它会发布到同一域上的端点，没有问题。

我已经完成了 10 个测试用例，每个测试将查询端点 3-4 次（通常在结果准备好/完成之前需要很长时间）。所有10个测试用例都可以，那么第11个可能有这个问题。

Answer 1

我不知道您在这 2 年中是否解决了您的问题。 但是昨天我遇到了同样的错误。

起初我认为这也是 CORS 问题，在我看到第二次调用中的标头丢失和标头中的“keep-alive”标签后，我找不到任何关于我的承诺的信息，所以我尝试关闭通过等待一些时间自动“保持活动”连接。

我不使用 takeWhile 来制作循环，我更喜欢 for 循环，因为它可以在其中使用 await 函数。

for(const list of lists){
    await this.httpClient.get(url).toPromise();
    await this.delay(500);
}

delay(ms: number) {
    return new Promise( resolve => setTimeout(resolve, ms) );
}

我尝试使用 100 和 200 毫秒，但它不适合我。

希望对你有帮助。

Answer 2

app.use(function(req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  res.setHeader('Access-Control-Expose-Headers','Content-Type,expire');
 next();
});

在你的服务器上试试这个。如果您想传递额外的标头参数，您需要在res.setHeader('Access-Control-Allow-Headers', 'Content-Type , token'); 中添加这些变量，但请记住不要在变量名中使用“-”。