Question

我有一个角度应用程序，它每5秒查询一次节点/表达后端端点。但是，偶尔我会遇到错误提示。

用例

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

角度

我每5秒钟执行一次http get请求

public class MyTableDecorator extends TableDecorator {
  @Override
  public String addRowClass() {
    return "these are css classes\" title=\"this is the title";
  }
}

第一个请求很好，然后在下一个请求中出现以下错误。

无法加载   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。

   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();

}

注意

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

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

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

Answer 1

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

起初，我也认为这也是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');中添加这些变量，但请记住不要在变量名中使用'-'。

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

2 个答案: