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
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);
});
}
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;
});
}
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 .
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.