web-dev-qa-db-ja.com

ReactJS Fetch APIを使用したCORSセットアップ

次の構造を持つ外部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 AP​​I URL側（ https：// XXXX ）？

8javascript
2
John Rey Tanquinco

私自身の質問に答えたいと思います。 CORSのしくみに関する詳細なドキュメントを読んだ後、Drupalが他のサイト/サーバーにアクセスできるようにするには、Drupalサイト自体ではなく、相手側でCORSを有効にする必要があることがわかりました。ここにもいくつかの基本的な説明があります。 https://stackoverflow.com/questions/10636611/how-does-access-control-allow-Origin-header-work/10636765#10636765

1
John Rey Tanquinco