web-dev-qa-db-fra.com

Configuration de CORS avec ReactJS Fetch API

J'ai une application ReactJS qui récupère une URL d'API externe avec la structure suivante.

fetch(url) // or fetch(url, {mode:'cors'})
  .then(response => response.json())
  .then(data => {

Dans mon navigateur, lorsqu'il essaie de rendre le composant, je reçois le message d'erreur suivant

Impossible de charger https: // XXXXX/jsondata : aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée. L'origine ' http: // localhost: 808 ' n'est donc pas autorisée à accéder. Si une réponse opaque répond à vos besoins, définissez le mode de la demande sur "no-cors" pour récupérer la ressource avec CORS désactivé.

Je recherche donc comment activer CORS dans Drupal 8 et faire des essais et erreurs pour différentes configurations n'a pas fonctionné.

Ceci est mon actuel cors.config en dessous de services.yml fichier

  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

J'ai essayé d'installer une extension Chrome incroyable qui supprime cette erreur, mais bien sûr, cela ne fonctionnera que sur mon appareil.

Je ne suis pas tout à fait sûr, mais est-ce quelque chose à changer Drupal config CORS ou autoriser Access-Control-Allow-Origin côté URL de l'API ( https: // XXXX )?

8javascript
2
John Rey Tanquinco

Je voudrais juste répondre à ma propre question. Après avoir lu plus de documentation sur le fonctionnement de CORS, j'ai découvert que, pour permettre à Drupal d'accéder à un autre site/serveur, CORS doit être activé sur l'autre partie et non sur le site Drupal lui-même. Quelques explications de base trouvées ici aussi. https://stackoverflow.com/questions/10636611/how-does-access-control-allow-Origin-header-work/10636765#10636765

1
John Rey Tanquinco