Question

我对CORS屏蔽有疑问。我从网络上尝试了几种解决方案（浏览器安全性，反向代理），但并没有解决。可能有人可以帮助我。

有一个WebApp（用angular实现），可以执行一些API调用。对于开发用途，有一个自签名证书。我无权访问API端。

首先，它获得一个令牌，然后，它使用此令牌通过另一个调用接收传感器数据。两者都使用HttpClient和后方法进行。

虽然获得令牌的工作正常，但第二通电话仍然存在问题。这是我收到的错误：

SELECT a.ADJ_MONTH, a.ADJUSTMENT_AMOUNT, a.CURRENCY_CD, b.PAY_MONTH, b.pay_amount
FROM 
  (SELECT TO_CHAR(CRE_DT, 'Month') AS ADJ_MONTH ,
        SUM(ADJ_AMT)                   AS ADJUSTMENT_AMOUNT,
        CURRENCY_CD
      FROM ci_Adj
      WHERE 
      sa_id IN (SELECT sa_id FROM ci_Sa WHERE acct_id=:F1)
      AND EXTRACT( YEAR FROM cre_dt) = EXTRACT(YEAR FROM sysdate)
      GROUP BY TO_CHAR(CRE_DT, 'Month'), CURRENCY_CD
      ORDER BY TO_CHAR(CRE_DT, 'Month') DESC
  )a,
  (SELECT TO_CHAR(pae.cre_dttm, 'Month') AS PAY_MONTH ,
        SUM(pa.PAY_AMT)                      AS PAY_AMOUNT
      FROM ci_pay_event pae,
        ci_pay pa
      WHERE pa.acct_id                     =:F1
      AND pa.pay_status_flg                ='50'
      AND pae.pay_event_id                 =pa.pay_event_id
      AND EXTRACT( YEAR FROM pae.cre_dttm) = EXTRACT(YEAR FROM sysdate)
      GROUP BY TO_CHAR(pae.cre_dttm, 'Month')
      ORDER BY TO_CHAR(pae.cre_dttm, 'Month') DESC
  )b
  where a.ADJ_MONTH=b.pay_amount (+);

起初，获取令牌时我遇到了类似的错误。我通过将错误消息中提到的URI复制到新的浏览器选项卡中并接受了我确定的不安全连接来解决该问题。它导致我进入一个页面（来自webapp），告诉我我无权访问（因为我仅放置URL，没有其他参数等）。此后，接收令牌的API调用成功。但是下一次通话仍然无法正常工作。

我还想知道反向代理（traefik）是否不能正常工作。

我在代理配置（routes.toml）中确实有以下内容：

Access to XMLHttpRequest at 'https://my.domain.local/rest/dataQuery' from origin 'http://my.domain.local:8880' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我还认识到，失败的呼叫的源似乎使用http，而响应来自https（它被视为另一个域，因此是CORS错误）。

我尝试了不同的浏览器和计算机。

我被困住了，没有进一步的想法去做或检查。可以出于开发目的而禁用此CORS检查，因为在实时系统上将有完整的证书。

这是我进行API调用的方式：

[http.middlewares.cors.headers]
        Access-Control-Allow-Origin = "*"
        Access-Control-Allow-Methods = "GET, POST, OPTIONS"
        Access-Control-Allow-Headers = "Accept,Authorization,Content-Type,DNT,Host,Keep-Alive,Origin,Referer,User-Agent,X-CSRF-Token,X-Requested-With"

获取令牌：

private CLIENT_ID = 'my-api';
  private SECRET = 'w231wfsdf-sf23d1sfsdf-sdfs2fd1-sdfsdf';
  private BASE_URL = 'my.domain.local';
  private REALM = 'Myrealm';
  private AUTH_URL = 'https://' + this.BASE_URL + '/auth/realms/' + this.REALM + '/protocol/bla/token';
  private API_URL = 'https://' + this.BASE_URL + '/rest/dataQuery';

获取传感器数据：

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/x-www-form-urlencoded',
  })
};

const body = 'grant_type=client_credentials&' + 'client_id=' + this.CLIENT_ID + '&client_secret=' + this.SECRET;

return this.httpClient.post<any>(this.AUTH_URL, body, httpOptions)

任何帮助或提示将不胜感激。谢谢。

编辑：再次检查trafik.docs之后，我将routes.toml中的配置更改为：

return this.httpClient.post<any>(this.API_URL, theApiParams, httpOptions);const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
      })
    };

    const pp = JSON.stringify(param);

但是它也不起作用。也许是我在阅读文档，我很难理解。尚不清楚。

Angular WebApp调用API会导致CORS阻塞，尽管将反向代理与allow-rule一起使用

0 个答案: