いつもお世話になっています。
下記の質問についてご存知の方がいらっしゃいましたら、ご教示を願います。
【質問の主旨】
GitHubに公開したコードをローカル開発環境上で実行してPayPalの決済ボタンを押すと、コンソール画面上に下記のエラーが表示されます。
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://www.sandbox.paypal.com/xoplatform/logger/api/logger with MIME type text/html.
このエラーを表示させないようにするためには、公開したコードのうち、どこをどう修正すれば良いでしょうか?
【質問の補足】
上記の質問に対して下記のとおり7点を補足説明いたします。
1.
GitHubのコードを実行すると、AMPの公式ドキュメントで示されている「インタラクティブな AMP ページを作成する」というECサイトのチュートリアルが表示されます。PayPalボタン以外の箇所はこのチュートリアルを写経しています。
2.
PayPalの決済ボタンはPayPal developerのSmart Payment Buttons Integrationに基づいて作成しました。
3.
ECサイトではありますが、「インタラクティブな AMP ページを作成する」とPayPalの決済ボタンの間に価格などの特別な紐付けをしていません。単にAMPとPayPalで示されているコードを足し合わせただけです。
4.
エラーが発生する理由はCORSのルールにもとづき、ポリシーが異なるURLの間でデータの受け渡しをする状態になっていないためであると推測しています。
5.
今回のエラーを表示させないためには、
fetch('https://hoge.com/fuga',{ mode: 'cors' })
のようなコードをどこかに記述すべきだと思いますが、どこにfetchメソッドを使った詳細なコードを書くのかよく分かりません。
6.
ローカル開発環境は、Node.jsを使用しています。
cd advanced-interactivity-in-amp
→ node app.js
→ localhost:3000
で表示画面を確認することができます。
(参考ページ)
https://amp.dev/ja/documentation/guides-and-tutorials/develop/interactivity/prereqs-setup?format=websites
https://github.com/echizenyayota/advanced-interactivity-in-amp/blob/developer_liquidation/app.js#L103-L105
7.
スタック・オーバーフローでも同様の質問をしていますが回答を得られないため、こちらでも質問をさせていただきました。
以上、ご確認のほどよろしくお願い申し上げます。
あなたの回答
tips
プレビュー