web-dev-qa-db-fra.com

Activer CORS dans fetch api

Je reçois le message d'erreur suivant qui m'a empêché de continuer

Échec du chargement https: //site/data.json : La réponse à la demande de contrôle en amont ne réussit pas le contrôle du contrôle d'accès: aucun en-tête 'Accès-Contrôle-Autoriser-Origine' n'est présent sur la ressource demandée. Origin ' http: // localhost: 808 ' n'est donc pas autorisé à accéder. Si une réponse opaque répond à vos besoins, définissez le mode de la demande sur "No-cors" pour extraire la ressource avec CORS désactivé. localhost /: 1 Uncaught (promis) TypeError: Impossible d'extraire

J'essaie d'activer CORS dans mon fichier rea js mais je n'ai pas pu obtenir le résultat attendu. J'ai installé une extension chrome et cela fonctionne. Mais pour utiliser cela en site de production, je dois l'activer dans mon code. Comment dois-je organiser correctement le code pour activer le CORS.

fetch(URL, {
  mode: 'cors',
  headers: {
    'Access-Control-Allow-Origin':'*'
  }
})
  .then(response => response.json())
  .then(data => {
javascriptreactjsfetch-api
12
johntanquinco

Les navigateurs ont une sécurité interdomaine côté client qui vérifie que le serveur est autorisé à récupérer les données de votre domaine. Si Access-Control-Allow-Origin n'est pas disponible dans l'en-tête de la réponse, le navigateur interdit l'utilisation de la réponse dans votre code JavaScript et lève une exception au niveau du réseau. Vous devez configurer cors sur votre serveur.

Vous pouvez récupérer la demande en utilisant mode: 'cors'. Dans cette situation, le navigateur ne lancera pas d'exception pour plusieurs domaines, mais il ne donnera pas de réponse dans votre fonction javascript.

Ainsi, dans les deux cas, vous devez configurer cors sur votre serveur ou utiliser un serveur proxy personnalisé.

9
Kishan Mundha