reactjs - In-Context Checkout : Uncaught SecurityError: Blocked a frame with origin: checkout. js:4734 抛出错误

Question

我正在实现 PayPal 的上下文结账并使用高级上下文 JavaScript 设置 ( https://developer.paypal.com/docs/classic/express-checkout/in-context/javascript_advanced_settings )

我的应用是 React 应用。所以我不能像他们建议的那样使用 PP API，这只是在 <script> ... </script> 之间抛出一个代码。在按钮下方的页面某处标记。我的 React 组件具有我需要在 PP 函数调用中发送到服务器的状态和数据。所以我把PP代码放在了componentDidMount方法。由于某种原因，PP 抛出了这个错误:

checkout.js:4734 Uncaught SecurityError: Blocked a frame with origin "http://example.com:3000" from accessing a frame with origin "https://www.sandbox.paypal.com". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match. (anonymous function) @ checkout.js:4734

checkout.js:4515 GET http://www.paypalobjects.com/api/oneTouch.html net::ERR_EMPTY_RESPONSE

代码如下:

componentDidMount() {
    window.paypalCheckoutReady = function() {
        paypal.checkout.setup(config[NODE_ENV].ppMerchantID, {
            locale: 'en_US',
            environment: 'sandbox',
            buttons: [
                {
                    container: 'checkoutBtnContainer',
                    type: 'checkout',
                    color: 'gold',
                    size: 'medium',
                    shape: 'pill',
                    click: (ev)=>{
                        paypal.checkout.initXO();
                        $.post('/checkout', {
                            checkoutData: this.props.checkoutData,
                        })
                        .done(res => {
                            paypal.checkout.startFlow(res.link);
                        })
                        .fail(err => {
                            paypal.checkout.closeFlow();
                        });
                    }
                }
            ],
        });
    };
},

我知道跨域政策。我不明白为什么会这样。如果我将代码放在 <script> ... </script> 之间的页面上，为什么代码可以正常工作？标签，但是如果我在我的 React 组件中使用它，PP 会抛出错误。那是什么原因呢？是 React 的问题还是 PayPal 的问题？

Answer 1

UPD:不，下面不是问题的解决方案。偶尔支付宝的checkout.js脚本抛出错误。

然而，它解决了this问题

显然，

1) 没有this :

window.paypalCheckoutReady = function() {
    // wrong this is here
}

我改为:

window.paypalCheckoutReady = () => {
    // correct this is here now
}

我不喜欢.bind(this) .

2) 我删除了 <form />标记并设置普通 <div>相反:

// before
<form id="checkoutBtnContainer" method="post" action="/checkout"></form>

// after
<div id="checkoutBtnContainer"></div>

我不知道为什么以及如何，但现在一切正常。