In-Context Checkout: Uncaught SecurityError: Blocked a frame with origin: checkout.js:4734 throws error答案

【问题标题】：In-Context Checkout: Uncaught SecurityError: Blocked a frame with origin: checkout.js:4734 throws errorIn-Context Checkout: Uncaught SecurityError: Blocked a frame with origin: checkout.js:4734 throws error
【发布时间】：2017-01-13 02:05:37
【问题描述】：

我正在实施 PayPal 的 In-Context Checkout 并正在使用 Advanced In-Context 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> 标签之间的页面上，为什么代码可以正常工作，但是如果我在我的 React 组件中使用它，PP 会抛出错误。这是什么原因？是 React 的错还是 PayPal 的错？

【问题讨论】：

标签： reactjs paypal paypal-sandbox paypal-rest-sdk express-checkout

【解决方案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>

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

【讨论】：