問題タブ [google-amp]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - AMP の CORS の処理方法
amp-list
JSON ファイルを使用して製品を動的にリストするために使用するページがあります。ディレクトリ構造は次のとおりです。ディレクトリ*root*/amp/product-name/
内には、AMP HTMLを含む と、ページに表示する製品データを含む があります。ページに直接アクセスすると、すべてが期待どおりに機能しています:
https://example.com/amp/product-name/product-name
index.html
products.json
ampproject.org CDN からアクセスすると問題が発生します。
これが実際のページです。コンソールにアクセスすると、CORS エラーがあることがわかります。どうすればこれを処理できますか? ドキュメントは正確な処理方法について明確ではなく、非常にあいまいな概要であるため、新しい人にとってはこれは意味がなく、その方法を直感的に理解することはできません. ドキュメントでリンクされているAMP独自のapp.jsからコードをコピーして部分的に作成した、ある種のリクエストハンドラーが必要であることはわかっています。要素内では、amp-list
以前は src が JSON ファイルを直接指していましたが、(JS ファイルなどの) ハンドラーを指し、ハンドラーに要求ヘッダーを設定してから適切な JSON を出力する必要があることがわかりました。 .
リクエストハンドラーについて私が持っているものは次のとおりです。
そして、これが私がHTMLに使用しているものです。
anchor - AMP ページのアンカー タグがページ全体をリロードする
AMP ページに次のハイパーリンクがあります。これは、ページのさらに下にあるアンカーへのリンクです。
<a href="https://www.example.com/venues/amp#party">party</a>
アンカー タグも存在します。
<a name="party"></a>
ユーザーが URLhttps://www.example.com/venues/amp
でハイパーリンクをクリックすると、ページ全体がリロードされて表示されるようになりましたhttps://www.example.com/venues/amp#party
ページをリロードしたくありません。通常の Web ページのようにアンカー タグにジャンプしたいだけなのですが、なぜこのようなことが起こっているのでしょうか? Windows 10 で Chrome をテストしています。