質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
AMP(Accelerated Mobile Pages)

AMP(Accelerated Mobile Pages)は、Google社を始め複数のプラットフォームが共同で参加しているプロジェクト。モバイルユーザーのUX向上を目的とし、モバイルページの表示速度の高速化を図っています。

PayPal

PayPalとは、インターネットやメールアドレスを利用した決済サービスのことです。PayPal口座を開設し、送金や入金を行うことができます。クレジットカード番号や口座番号などの情報を取り引き先に知らせる必要がないため、安全なサービスといわれています。アメリカを中心に全世界で多く使用されているオンライン決済サービスです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

Q&A

0回答

671閲覧

Cross-Origin Read Blocking (CORB) blocked cross-origin response のエラー表示を消すためにはどうすれば良いでしょうか?

echizeyayota

総合スコア104

AMP(Accelerated Mobile Pages)

AMP(Accelerated Mobile Pages)は、Google社を始め複数のプラットフォームが共同で参加しているプロジェクト。モバイルユーザーのUX向上を目的とし、モバイルページの表示速度の高速化を図っています。

PayPal

PayPalとは、インターネットやメールアドレスを利用した決済サービスのことです。PayPal口座を開設し、送金や入金を行うことができます。クレジットカード番号や口座番号などの情報を取り引き先に知らせる必要がないため、安全なサービスといわれています。アメリカを中心に全世界で多く使用されているオンライン決済サービスです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

0グッド

1クリップ

投稿2019/06/14 10:00

編集2019/06/14 10:04

いつもお世話になっています。
下記の質問についてご存知の方がいらっしゃいましたら、ご教示を願います。


【質問の主旨】

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-ampnode app.jslocalhost: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.

スタック・オーバーフローでも同様の質問をしていますが回答を得られないため、こちらでも質問をさせていただきました。


以上、ご確認のほどよろしくお願い申し上げます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問