上下文中签出:未捕获的SecurityError:阻止了具有以下来源的帧:checkout.js:4734引发错误 [英] In-Context Checkout: Uncaught SecurityError: Blocked a frame with origin: checkout.js:4734 throws error

问题描述

我正在实现PayPal的In-Context Checkout，并且正在使用高级In-Context JavaScript设置(

I'm implementing PayPal's In-Context Checkout and am using Advanced In-Context JavaScript settings (https://developer.paypal.com/docs/classic/express-checkout/in-context/javascript_advanced_settings)

我的应用是React应用.因此，我不能按照他们的建议使用PP API，它只是在<script> ... </script>标记之间的按钮下页面中的某个位置之间添加了代码.我的React组件具有需要在PP函数调用中发送到服务器的状态和数据.因此，我将PP代码放在componentDidMount方法中.由于某种原因，PP会引发此错误:

My app is a React app. So I can't use PP API as they suggest it, that is just throw a code between <script> ... </script> tags somewhere in the page under their buttons. My React components have state and data that I need to send to server within PP function calls. So I placed PP code in componentDidMount method. And for some reason PP throws this error:

checkout.js:4734未捕获的SecurityError:阻止了来源为" http://example.com:3000"，以访问来源为" https://www.sandbox.paypal.com "的框架.请求访问的帧的协议为"http"，正在访问的帧的协议为"https".协议必须匹配. (匿名函数)@ checkout.js:4734

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

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，则PP会引发错误.是什么原因造成的?是React错误还是PayPal的错误?

I know about cross-origin policy. I don't understand why it is the case here. Why the code works fine if I throw it on the page between <script> ... </script> tags, but PP throws an error if I use it in my React component. What is the cause of that? Is it React fault or PayPal's?

推荐答案

UPD:不，下面不是解决该问题的方法.有时Paypal的checkout.js脚本会引发错误.

UPD: No, below is not a solution for the problem. Occasionally Paypal's checkout.js script throws the error.

但是，它解决了this问题

显然，

1)没有this:

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

我更改为:

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

我不喜欢.bind(this).

2)我删除了<form />标签并改为设置了普通<div>:

2) I removed <form /> tag and set plain <div> instead:

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

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

我不知道为什么和如何，但是现在一切正常.

I don't know why and how, but all works fine now.

这篇关于上下文中签出:未捕获的SecurityError:阻止了具有以下来源的帧:checkout.js:4734引发错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！