引入Google Pay API的pay.js脚本报net::ERR_FILE_NOT_FOUND且页面加载变慢

• 当你将Google Pay提供的pay.js下载到本地项目、直接通过file://协议（即双击本地HTML文件）打开页面时，就会触发该异常
• pay.js内部对Google Sans字体的引用采用了协议相对URL写法（资源地址开头为//fonts.googleapis.com/...，不携带固定的http/https协议头）
• 在file://协议环境下，浏览器会自动让这个资源请求继承当前页面的file协议，最终拼接出无效的file://fonts.googleapis.com/css?family=Google+Sans:500本地路径，直接抛出net::ERR_FILE_NOT_FOUND错误
• 这类无效请求没有内置快速失败机制，会一直占用浏览器的连接超时等待时间，连带阻塞页面其他资源的加载流程，最终表现为页面整体加载速度变慢

• 最根本的修复方式：不要直接用file://协议打开页面调试，通过本地静态web服务（比如vite dev、http-server、本地Nginx托管）把项目运行在http://localhost:端口的地址下访问
  这种环境下，协议相对URL会自动匹配当前http协议，拼接为合法的https://fonts.googleapis.com/...远程资源地址，从根源上消除路径解析错误和加载超时问题
• 如果临时需要在file://协议下调试、无法切换web服务环境：
  • 在页面head标签最顶部提前插入兜底字体声明，让浏览器直接命中系统自带的同风格无衬线字体作为Google Sans的替代，不需要额外发起远程字体请求
  • 在引入pay.js的标签前，通过简单的资源拦截逻辑，直接阻断指向fonts.googleapis.com的无效请求，避免触发404错误和对应的超时等待
• 避坑提醒：不要直接修改本地存储的pay.js源码硬删字体加载逻辑，后续脚本版本更新、或是切换到线上环境时很容易遗漏改动，甚至可能触发Google Pay接口的资源校验异常，影响支付流程的正常调用

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