尝试在 React 和 Webpack 中使用 Facebook SDK 获取资源时出现网络错误

Question

我正在尝试将Facebook SDK用于JavaScript，我希望用户登录，以便我可以获得FB返回的令牌，该过程成功完成，但我会遇到错误“尝试获取资源时的NetworkError”。在控制台。

这是我调用Facebook SDK并与我的应用程序连接的代码：

export function initFacebookSdk() {
  return new Promise(resolve => {
    // wait for facebook sdk to initialize before starting the react app
    window.fbAsyncInit = function () {
      window.FB.init({
        appId: <appId>,
        cookie: true,
        xfbml: true,
        version: 'v13.0'
      });
      resolve()
    };   
  });
}

export function loadFacebookSDK(d, s, id){
  return new Promise(resolve => {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) { return; }
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
    resolve()
  })
}

这是我称之为使用Facebook登录的函数：

export const FbLogin = () => {
  return new Promise( resolve => {
    loadFacebookSDK(document, "script", "facebook-jssdk")
    initFacebookSdk()
    window.FB.login(response => {
      if (response.authResponse) {
        resolve(response);
      } else {
        resolve(response);
      }
    }, {scope: 'email'});
  })
}

代码的这一部分是调用函数并正确获得令牌的部分：

  const getFbToken = async (e) => {
    e.preventDefault()
    const data = await FbLogin();
    console.log(data);
  }

我需要帮助才能知道我做错了什么以及如何防止出现错误，目前我正在本地执行测试。

Answer 1

NetworkError 表示请求无法通过。最常见的原因是：

• 请求已被用户阻止，例如广告拦截器（Facebook 常见）
• 端点的 CORS 策略不允许请求
• 端点类型错误或协议 (https)丢失
• 端点离线（对于 Facebook SDK 来说不太可能）
• 客户端离线，或者（如果在服务器上运行）防火墙规则阻止访问

在 OP 的情况下，他们的广告拦截器阻止了对 Facebook 的请求。这很常见，因为相同的 SDK 用于收集用户数据和显示 Facebook 广告。

为了防止使用广告拦截器的用户获得不良的用户体验，您可能希望在请求被阻止时显示有意义的错误消息。 这篇文章中描述了一个巧妙的解决方案。