时间戳

首页 > 解决方案 > React 在移动 recaptch 就绪回调时抛出 CORs 错误

javascript - React 在移动 recaptch 就绪回调时抛出 CORs 错误

问题描述

我有一个使用 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 的东西，但这似乎有点超出我的学习曲线。

标签： javascriptreactjsrecaptcha

解决方案

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

然而，在退后一步思考我的目标后，我确实解决了这个问题。我没有将其分解为多个方法（我的 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 调用以获取谷歌数据并再次更新状态。

推荐阅读