尝试在 React 和 Webpack 中使用 Facebook SDK 获取资源时出现 NetworkError

Question

我正在尝试为 javascript 使用 Facebook SDK，我希望用户登录以便我可以获得 FB returns 的令牌，该过程已成功完成，但出现错误“尝试获取资源时出现网络错误。”在控制台中。

这是我调用 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'});
  })
}

这部分代码是调用函数并正确获取token的代码：

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

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

求助:(

Answer 1

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

该请求已被用户阻止，例如 ad-blocker（Facebook 常见）
端点的 CORS 策略不允许该请求
端点是 miss-typed，或者缺少协议 (https)
端点离线（不太可能用于 Facebook SDK）
客户端离线，或者（如果运行在服务器上）防火墙规则阻止访问

就 OP 而言，他们的 ad-blocker 阻止了对 Facebook 的请求。这很常见，因为同一个 SDK 用于收集用户数据和显示 Facebook 广告。

为了防止 ad-blocker 的用户体验不佳，您可能希望在请求被阻止时显示有意义的错误消息。 this post.

中描述了一个巧妙的解决方案

尝试在 React 和 Webpack 中使用 Facebook SDK 获取资源时出现 NetworkError

NetworkError when attempting to fetch resource using Facebook SDK in React and Webpack

javascript

reactjs

facebook

webpack