Vue2中如何阻止Google reCAPTCHA加载Roboto字体及相关请求

• 通过内容安全策略（CSP）拦截
  在页面的<head>中添加meta标签，配置CSP规则直接阻断对fonts.gstatic.com的资源请求：

  <meta http-equiv="Content-Security-Policy" content="font-src 'self' data:; style-src 'self' 'unsafe-inline';">
  

  这条规则限制字体仅能从当前域名或data URI加载，直接拦截该域名的字体请求，同时保留Recaptcha所需的内联样式权限。

• 前端拦截网络请求
  在Vue项目的入口文件（比如main.js）中重写浏览器的请求方法，提前拦截目标域名的请求：

  // 拦截fetch请求
  const originalFetch = window.fetch;
  window.fetch = function(resource, options) {
    if (typeof resource === 'string' && resource.includes('fonts.gstatic.com')) {
      return Promise.resolve(new Response('', { status: 200 }));
    }
    return originalFetch(resource, options);
  };
  
  // 拦截XMLHttpRequest请求
  const originalXHR = XMLHttpRequest.prototype.open;
  XMLHttpRequest.prototype.open = function(method, url) {
    if (url.includes('fonts.gstatic.com')) {
      this.abort();
      return;
    }
    originalXHR.call(this, method, url);
  };
  

  这种方式能在前端层面阻断所有指向该域名的请求，Recaptcha核心功能不受影响，仅会用系统默认字体替代谷歌字体。

• 服务端代理转发
  如果项目有后端服务，可配置反向代理将fonts.gstatic.com的请求转发到可访问的镜像源，或本地托管字体文件。以Nginx为例，添加如下配置：

  location ~* ^https?://fonts.gstatic.com/(.*)$ {
    # 转发到本地字体服务
    proxy_pass http://your-local-font-server/$1;
    # 或使用国内镜像，比如：
    # proxy_pass https://fonts.loli.net/$1;
  }
  

• 尝试修改Recaptcha加载参数
  可以在加载Recaptcha的脚本中添加hl参数指定语言，不过这个方法不一定生效——因为Recaptcha的字体加载属于内部逻辑，官方并未公开禁用字体的配置项，仅作为备选尝试。

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