上下文Checkout: Uncaught SecurityError: Blocked a frame with or

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:阻止一个来源为http://example.com:3000的帧访问另一个来源为https://www.sandbox.paypal.com的帧。请求访问的帧具有"http"协议，被访问的帧具有"https"协议。协议必须匹配。(匿名函数)@ 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>标签之间的页面上，但PP抛出一个错误，如果我在我的React组件中使用它。这是什么原因呢?是React的错还是PayPal的错?

Answer 1

UPD:不，下面不是问题的解决方案。Paypal的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>

我不知道为什么，但现在一切都好了。