web-dev-qa-db-fra.com

Non capturé (promis) TypeError: Echec de l'extraction et erreur Cors

avoir un problème pour récupérer les données de la base de données. Je fais de mon mieux pour expliquer le problème.

1.Si je quitte le "mode": "no-cors" dans le code ci-dessous, je pourrai récupérer les données du serveur avec Postman, mais pas avec mon propre serveur. Pensant que cela doit être mon erreur côté client

  1. Lorsque je supprime "mode": "no-cors", je reçois deux erreurs: - L'API extraite ne peut pas charger http: // localhost: 3000/ . Le champ d'en-tête de demande access-control-allow-Origin n'est pas autorisé par Access-Control-Allow-Headers dans la réponse de contrôle en amont .- Non capturé (dans la promesse) TypeError: Echec de l'extraction.

Quick Browsing a suggéré de mettre dans le "mode": "no cors" qui a corrigé cette erreur, mais cela ne semble pas être une bonne chose à faire.

J'ai donc pensé que quelqu'un aurait peut-être une suggestion sur la manière d'aborder ce problème.

J'espère vraiment que j'ai été assez clair, mais je suis assez sûr que je ne donne pas d'explication claire ici: S

function send(){
    var myVar = {"id" : 1};
    console.log("tuleb siia", document.getElementById('saada').value);
    fetch("http://localhost:3000", {
        method: "POST",
        headers: {
            "Access-Control-Allow-Origin": "*",
            "Content-Type": "text/plain"
        },//"mode" : "no-cors",
        body: JSON.stringify(myVar)
        //body: {"id" : document.getElementById('saada').value}
    }).then(function(muutuja){

        document.getElementById('väljund').innerHTML = JSON.stringify(muutuja);
    });
}
javascriptnode.jscors
15
OFFLlNE

L'ajout de mode:'no-cors' à l'en-tête de la demande garantit qu'aucune réponse ne sera disponible dans la réponse.

L'ajout d'un en-tête "non standard", la ligne 'access-control-allow-Origin' déclenchera une demande de contrôle en amont OPTIONS, que votre serveur doit gérer correctement pour que la demande POST puisse même être envoyée.

Vous faites également fetch faux ... fetch renvoie une "promesse" pour un objet Response comportant des créateurs de promesse pour json, text, etc., selon le type de contenu ... 

En bref, si votre côté serveur gère correctement CORS (comme le suggère votre commentaire, cela devrait être le cas), ce qui suit devrait fonctionner

function send(){
    var myVar = {"id" : 1};
    console.log("tuleb siia", document.getElementById('saada').value);
    fetch("http://localhost:3000", {
        method: "POST",
        headers: {
            "Content-Type": "text/plain"
        }
        body: JSON.stringify(myVar)
    }).then(function(response) {
        return response.json();
    }).then(function(muutuja){
        document.getElementById('väljund').innerHTML = JSON.stringify(muutuja);
    });
}

cependant, puisque votre code n'est pas vraiment intéressé par JSON (il finit par stigmatiser l'objet) - c'est plus simple à faire

function send(){
    var myVar = {"id" : 1};
    console.log("tuleb siia", document.getElementById('saada').value);
    fetch("http://localhost:3000", {
        method: "POST",
        headers: {
            "Content-Type": "text/plain"
        }
        body: JSON.stringify(myVar)
    }).then(function(response) {
        return response.text();
    }).then(function(muutuja){
        document.getElementById('väljund').innerHTML = muutuja;
    });
}
7
Jaromanda X

Voir l'article de mozilla.org sur le fonctionnement de la SCRO. 

Vous aurez besoin de votre serveur pour renvoyer les en-têtes de réponse appropriés, par exemple:

Access-Control-Allow-Origin: http://foo.example Access-Control-Allow-Methods: POST, PUT, GET, OPTIONS Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization

N'oubliez pas que vous pouvez utiliser "*" pour Access-Control-Allow-Origin qui ne fonctionnera que si vous essayez de transmettre des données d'authentification. Dans ce cas, vous devez répertorier explicitement les domaines d'origine que vous souhaitez autoriser. Pour autoriser plusieurs domaines, voir cet article .

1
Dave Cole

vous pouvez utiliser des solutions sans ajouter "Access-Control-Allow-Origin": "*", si votre serveur utilise déjà la passerelle proxy, ce problème ne se produira pas car les interfaces frontale et principale seront routées dans la même adresse IP et le même port côté client. mais pour le développement, vous avez besoin de l'une de ces trois solutions si vous n'avez pas besoin de code supplémentaire 1- Simulez l'environnement réel à l'aide d'un serveur proxy et configurez le front et le backend sur le même port.

2- si vous utilisez Chrome, vous pouvez utiliser l'extension appelée Allow-Control-Allow-Origin: * cela vous aidera à éviter ce problème

3- vous pouvez utiliser le code mais certaines versions de navigateurs peuvent ne pas le supporter alors essayez d'utiliser l'une des solutions précédentes

la meilleure solution consiste à utiliser un proxy comme ngnix . Il est facile à configurer et simule la situation réelle du déploiement en production. 

0
3alaa baiomy