Angular 8集成Google Maps JS SDK遇CORS错误无法加载地图

核心问题定位 #

首次加载正常、后续调用触发CORS错误，且功能此前运行稳定，大概率是API密钥限制配置变更或动态加载逻辑的重复注入冲突导致。

排查与修复步骤 #

1. 核对Google API密钥的HTTP限制规则 #

结合你提供的密钥限制截图，重点确认：

• 允许的域名列表是否覆盖当前项目所有环境（开发/测试/生产），不要遗漏带端口的本地开发域名（如http://localhost:4200）
• 限制类型必须为HTTP referrers (web sites)，Google Maps JS SDK不支持IP地址限制
• 检查是否近期误修改或删除了原有允许的域名规则

2. 优化Angular地图加载逻辑（解决重复注入冲突） #

首次加载成功、后续报错，通常是重复加载SDK脚本引发的冲突，建议将加载逻辑改为单例模式：

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class GoogleMapsLoaderService {
  private isMapLoaded = false;
  private loadPromise: Promise<void>;

  loadMaps(apiKey: string): Promise<void> {
    // 已加载完成直接返回
    if (this.isMapLoaded) return Promise.resolve();
    // 正在加载中返回现有Promise避免重复请求
    if (this.loadPromise) return this.loadPromise;

    this.loadPromise = new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`;
      script.async = true;
      script.defer = true;

      script.onload = () => {
        this.isMapLoaded = true;
        resolve();
      };

      script.onerror = (err) => {
        this.loadPromise = null; // 失败后允许重试
        reject(err);
      };

      document.body.appendChild(script);
    });

    return this.loadPromise;
  }
}

调用地图功能前，先通过该服务确保SDK仅加载一次，避免重复注入脚本。

3. 清除缓存验证 #

• 强制刷新浏览器缓存（Ctrl+Shift+R），排除旧SDK脚本缓存的干扰
• 若项目使用CDN，临时禁用CDN测试，确认是否为CDN缓存导致的规则不生效

4. 检查Google Cloud控制台API状态 #

• 确认Maps JavaScript API服务处于启用状态，未被误关闭
• 查看API使用配额是否超限，配额不足会触发请求拦截（表现类似CORS错误）

5. 验证Referrer策略 #

• 检查Angular项目是否配置了Referrer-Policy，若设置为no-referrer会导致Google无法验证域名限制，需调整为strict-origin-when-cross-origin或默认值
• 在浏览器Network面板查看地图请求的Referer头，确认是否正确携带当前域名

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