Facebook网页登录集成报Uncaught (in promise) TypeError: Failed to fetch如何解决

• 客户端拦截触发报错：net::ERR_BLOCKED_BY_CLIENT 属于浏览器端主动拦截请求的典型报错，大多由AdBlock、uBlock Origin等广告拦截插件，或者浏览器默认开启的反跟踪防护功能触发，Facebook SDK的第三方请求被普遍标记为跟踪类请求，你的云端域名命中拦截规则后直接被阻断，本地未触发是因为本地测试域名未被纳入拦截列表。
• Facebook 应用配置不匹配：新建应用短暂恢复是因为新应用的请求未被拦截规则即时识别，触发登录操作后请求OAuth授权接口时再次被拦截；另外需确认Allowed Domains for the JavaScript SDK配置的域名与实际访问的协议、完整域名完全一致，带www和不带www、http和https都会被判定为不同域名，配置不一致会触发Failed to fetch报错。
• 服务端安全配置限制：Django的CORS规则如果未放行Facebook相关域名，或是Google Cloud的App.yaml中配置的Content-Security-Policy响应头没有允许加载Facebook JS资源、发起跨域请求，也会阻断SDK的正常请求。
• 本地HTTP环境的报错属于预期表现，Facebook SDK要求必须在HTTPS环境下运行，不会影响云端HTTPS环境的功能逻辑。

• 客户端侧排查验证：
  • 临时关闭所有广告拦截、隐私防护类插件，或将你的云端域名加入插件白名单后重试
  • 调整浏览器隐私设置，允许你的站点使用第三方Cookie，避免Facebook的登录态Cookie被浏览器拦截。
• 修正Facebook开发者平台配置：
  • 确认Allowed Domains for the JavaScript SDK填写的内容包含完整协议、完整域名，与用户实际访问的地址完全匹配
  • 补充配置「有效的OAuth跳转URI」，填入你的登录回调地址，即使是纯前端登录也需要配置该字段。
• 调整服务端配置：
  • Django侧安装django-cors-headers依赖，配置CORS_ALLOWED_ORIGINS允许Facebook相关域名，同时将你的站点域名加入CSRF_TRUSTED_ORIGINS列表
  • 检查App.yaml的响应头配置，若存在Content-Security-Policy规则，需添加script-src https://connect.facebook.net、connect-src https://graph.facebook.com https://www.facebook.com规则，放行Facebook的资源和接口请求。
• 高兼容替代方案：如果客户端拦截率过高，可放弃前端JS SDK登录方案，改用服务端OAuth跳转流程，直接跳转Facebook官方授权页完成登录后回调到你的服务端，该流程被拦截的概率远低于前端嵌入式SDK方案。

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