次の構造を持つ外部API URLをフェッチするReactJSアプリがあります。
fetch(url) // or fetch(url, {mode:'cors'})
.then(response => response.json())
.then(data => {
ブラウザでコンポーネントをレンダリングしようとすると、次のエラーメッセージが表示されます
読み込みに失敗しました https:// XXXXX/jsondata :リクエストされたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン ' http:// localhost:808 'はアクセスを許可されません。不透明な応答でニーズが満たされる場合は、リクエストのモードを「no-cors」に設定して、CORSを無効にしてリソースをフェッチします。
したがって、Drupal 8)でCORSを有効にする方法を調査し、さまざまな構成に対して試行錯誤を行っても機能しませんでした。
これは私の現在のcors.config
下 services.yml
ファイル
cors.config:
enabled: true
# Specify allowed headers, like 'x-allowed-header'.
allowedHeaders: ['x-csrf-token','authorization','content-type','accept','Origin','x-requested-with', 'access-control-allow-Origin','x-allowed-header','*']
# Specify allowed request methods, specify ['*'] to allow all possible ones.
allowedMethods: ['*'] // or ['POST', 'GET', 'OPTIONS', 'DELETE', 'PUT', 'PATCH']
# Configure requests allowed from specific origins.
allowedOrigins: ['https://XXXX/','*']
# Sets the Access-Control-Expose-Headers header.
exposedHeaders: true // or false
# Sets the Access-Control-Max-Age header.
maxAge: false // or 1000
# Sets the Access-Control-Allow-Credentials header.
supportsCredentials: true // or false
私はChrome拡張機能をインストールしようとしましたが、このエラーは削除されますが、もちろんこれは私のデバイスでのみ機能します。
完全に定かではありませんが、これは変更するものですDrupal CORS構成または許可Access-Control-Allow-Origin
API URL側( https:// XXXX )?
私自身の質問に答えたいと思います。 CORSのしくみに関する詳細なドキュメントを読んだ後、Drupalが他のサイト/サーバーにアクセスできるようにするには、Drupalサイト自体ではなく、相手側でCORSを有効にする必要があることがわかりました。ここにもいくつかの基本的な説明があります。 https://stackoverflow.com/questions/10636611/how-does-access-control-allow-Origin-header-work/10636765#10636765