React 在移动 recaptcha 就绪回调时抛出 CORs 错误答案

【问题标题】：React throws CORs errors when moving recaptch ready callbackReact 在移动 recaptcha 就绪回调时抛出 CORs 错误
【发布时间】：2020-01-14 10:17:13
【问题描述】：

我有一个使用 create-react-app 创建的 React 应用。我将 reCaptcha 放在上面并放在下面，一切都很好。令牌回来了，我可以嵌套一个获取并继续我的生活。

componentDidMount(){
  if(!this.state.isRecaptchaReady){
       window.grecaptcha.ready(function(){
         window.grecaptcha.execute('id', {action: 'homepage'})
        .then(//...)
    });
  } 
}

除了我不能，因为我知道必须有更好的方法。我想获取令牌并存储它，然后从中调用一个函数，而不是嵌套太深，我无法获得this 来挽救我的生命（我的意思是我可以但不想使用一堆绑定）。

requestRecaptchToken = () => {
    console.log(window.grecaptcha);
    //const tokenPromise = window.grecaptcha.execute('id', {action: 'homepage'});
  }

  handleRecaptchToken = data => {
    const { modal } = this.state;
    modal.recaptcha = JSON.parse(data);
    this.setState({modal});
  }

  componentDidMount(){
    if(!this.state.isRecaptchaReady){
      window.grecaptcha.ready(this.handleRecaptchReady());
    } 
  }

componentDidUpdate(){
  if(this.state.isRecaptchaReady){
    this.requestRecaptchToken();
  }
}

这一行

const tokenPromise = window.grecaptcha.execute('id', {action: 'homepage'});

外面

window.grecaptcha.ready()

与

错误：引发了跨域错误。 React 无法访问开发中的实际错误对象。请参阅https://reactjs.org/docs/cross-origin-errors.html 了解更多信息。

问题是它没有意义，我阅读了一些 WebPack eval 的东西，但目前这似乎有点超出我的学习曲线。

【问题讨论】：

标签： javascript reactjs recaptcha

【解决方案1】：

React 抛出的信息主要是因为我没有发现错误，而且它不知道去哪里寻找。我仍然不知道为什么在 ready 之外调用 execute 会出现错误的行为，但我认为调用方法、渲染和 react 可以访问的内容之间存在竞争条件。这是严格的猜测，我还不知道如何证明。

然而，在退后一步思考我的目标后，我确实解决了这个问题。我没有将其分解为多个方法（我的 java 大脑妨碍了），我只是使用箭头函数将this 作用域绑定到组件。

try {
  window.grecaptcha.ready(() => {
    window.grecaptcha.execute(process.env.REACT_APP_RECAPTCHA_ID).then(data => {
      this.handleRecaptchToken(data);
    });
  });
} catch(e) {
  console.log("reCaptcha token load error: " + e);
}

setState 可以采用可选的回调方法作为第二个参数这一事实允许handleRecaptchToken 在令牌数据完成后获取数据。

handleRecaptchToken = data => {
  this.setState({"recaptchaToken" : data}, this.fetchRecaptchaData);
}

fetchRecaptchaData 然后对我的服务器进行 api 调用以获取 google 数据并再次更新状态。

【讨论】：