Angular 14谷歌地图组件部署IIS时出现CORS 403错误求助

问题概述 #

升级Angular应用至14版本，使用@angular/google-maps@14.2.7后，部署到IIS服务器时地图无法加载，触发CORS预检错误：

Access to XMLHttpRequest at 'https://maps.googleapis.com/$rpc/google.internal.maps.mapsjs.v1.MapsJsInternalService/GetViewportInfo' from origin 'https://<hostname>' 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.

本地通过ng serve启动时地图正常显示，地图代码未做修改，仅部署环境存在差异。

关键排查点 #

• 域名权限差异：Google Maps API默认允许localhost等开发域名的跨域请求，但生产域名需手动添加到API密钥的允许列表中。
• 错误请求头：从提供的curl命令可见，预检请求错误地将Access-Control-Allow-Origin作为请求头发送（该头属于响应头范畴），这可能是IIS或应用拦截器的错误配置导致。

解决方案 #

1. 修正Google Maps API密钥的域名权限 #

登录Google Cloud控制台，更新API密钥的应用限制：

• 找到对应API密钥，进入“应用限制”设置
• 选择“HTTP引用来源（网站）”，添加生产域名（格式如https://<your-hostname>/*）
• 确认已启用Maps JavaScript API及相关依赖服务

2. 移除错误的请求头配置 #

• 检查IIS站点的HTTP请求头或URL重写规则，确认是否强制添加了Access-Control-Allow-Origin作为请求头，如有则删除该配置。
• 检查Angular项目中的HttpClient拦截器，排查是否有代码错误地将Access-Control-Allow-Origin添加到请求头中，修正拦截器逻辑。

3. 对齐Angular依赖版本 #

当前@angular/google-maps@14.2.7与Angular核心版本14.3.0不一致，尝试升级地图包至匹配版本：

npm install @angular/google-maps@14.3.0 --save

4. 验证IIS CORS配置 #

若IIS启用了CORS模块，确保其规则未干扰跨域请求：

• 打开IIS管理器，进入站点的CORS配置界面
• 确认没有针对maps.googleapis.com的错误限制规则
• 避免在IIS中对外部API请求添加自定义响应头

验证流程 #

1. 完成配置修改后，重新构建并部署应用到IIS
2. 打开浏览器开发者工具，查看预检请求的请求头，确认不再包含access-control-request-headers: access-control-allow-origin
3. 检查Google Maps API的响应头，确认Access-Control-Allow-Origin已正确返回生产域名

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