如何解决应用网关环境下CORS阻止XMLHttpRequest的请求头问题？

环境架构 #

• 部署了应用网关，配置两个基于私有IP的监听器：
  • 端口80：用于访问AKS中的Angular Web应用，路由路径：应用网关→AKS负载均衡器
  • 端口8080：供上述Angular应用访问AKS中的微服务，路由路径：应用网关→API管理→AKS负载均衡器

已解决的CORS问题 #

最初遇到的错误：

Access to XMLHttpRequest at 'http://XXXXXX:8080/api/mf/v1/login/info' from origin 'http://XXXXXXX' 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.

通过在应用网关指向API管理的路由规则中添加Access-Control-Allow-Origin响应头的重写规则解决。

当前新的CORS错误 #

现在出现以下两个错误：

Access to XMLHttpRequest at 'http://XXXXXX:8080/api/mf/v1/login/info' from origin 'http://XXXXXXXX' has been blocked by CORS policy: Request header field ocp-apim-subscription-key is not allowed by Access-Control-Allow-Headers in preflight response.

Access to XMLHttpRequest at 'http://XXXXX:8080/api/mf/v1/login/info' from origin 'http://XXXXXXX' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

已尝试在应用网关重写规则中添加相关配置，但未生效，不清楚是否需要补充应用网关配置或调整Angular应用代码。

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