上下文中签出:未捕获的安全错误:阻止了一个带有原点的帧:checkout.js:4734 抛出错误 [英] In-Context Checkout: Uncaught SecurityError: Blocked a frame with origin: checkout.js:4734 throws error
问题描述
我正在实施 PayPal 的上下文结账，并且正在使用高级上下文 JavaScript 设置(https://developer.paypal.com/docs/classic/express-checkout/in-context/javascript_advanced_settings)
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 Uncaught SecurityError: Blocked a frame with origin "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 获取 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();
});
}
}
],
});
};
},
我了解跨域策略.我不明白为什么这里是这种情况.如果我把它放在
