J'apprends à créer une connexion très simple pour une extension chrome en développement, je prends un nom et un mot de passe de deux boîtes d'entrée et je les envoie à un serveur en utilisant la méthode POST express, mais ils ne sont pas définis lorsque j'imprime leur. Voici le code:
Le server.js:
let nombre = document.getElementById('User');
let contrasena = document.getElementById('Password');
let boton = document.getElementById('boton');
boton.addEventListener('click', sendData);
function sendData(){
let nombreSTR = nombre.value
let contrasenaSTR = contrasena.value
fetch('http://localhost:8000/CTRL', {
mode:'no-cors',
method: 'POST',
body: { name: nombreSTR, passw: contrasenaSTR },
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
}
});
}
et le client:
let express = require('express');
let path = require("path");
let app = express();
app.use(express.json());
app.use(express.static(path.join(__dirname, '/CTRL')));
app.post('/CTRL', function(req, res) {
var nombre = req.body.name;
var passw = req.body.passw
console.log('Nombre: ' + nombre + ' password: ' + passw);
res.send('Nombre: ' + nombre + ' password: ' + passw);
});
app.listen('8000', function() {
console.log('server corriendo puerto 8000');
})
Voici ce que je entrer dans la console:
serveur corriendo puerto 8000
Nombre: mot de passe non défini: non défini
3 Réponses :
Vous devez convertir votre objet en chaîne avant l'envoi,
fetch('http://localhost:8000/CTRL', {
mode:'no-cors',
method: 'POST',
body: JSON.stringify({ name: nombreSTR, passw: contrasenaSTR }),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
});
Méthode 1:
$.post('http://localhost:8000/CTRL', {
name: nombreSTR,
passw: contrasenaSTR
},
function (data, status) {
alert("Data: " + data + "\nStatus: " + status);
});
Méthode 2: // Utilisation de JQuery
fetch('http://localhost:8000/CTRL', {
mode: 'no-cors',
method: 'POST',
body: `name=${nombreSTR}&passw=${contrasenaSTR}`, // https://stackoverflow.com/a/42312303/11343720
headers: {
Accept: 'application/json',
'Content-Type': 'application/x-www-form-urlencoded'
}
});
Associez les choses que vous avez omises ici:
Essayez de supprimer la barre oblique de l'URI de votre dossier. Essaye ça:
app.use (express.static (path.join (__ dirname, 'CTRL')));
Et surtout,
une. npm install --save body-parser
b. var bodyParser = require ('body-parser')
c. app.use (bodyParser.json ())
Si vous n'importez pas bodyParser , ExpressJS ne pourra pas analyser le corps de votre requête.
Voici l'exemple de code serveur complet qui, je pense, fonctionnera pour vous
const express = require('express');
const path = require("path");
const bodyParser = require("body-parser")
const app = express();
app.use(express.json());
app.use(express.static(path.join(__dirname, 'CTRL')));
app.use(bodyParser.urlencoded({ extended: true}));
app.use(bodyParser.json());
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization, noauth");
if (req.method === 'OPTIONS'){
res.header("Access-Control-Allow-Methods", "PUT, POST, PATCH, DELETE, OPTIONS");
res.setHeader('Access-Control-Allow-Credentials', false);
return res.status(200).json({});
}
next();
});
app.post('/CTRL', function(req, res) {
var nombre = req.body.name;
var passw = req.body.passw
console.log('Nombre: ' + nombre + ' password: ' + passw);
res.send('Nombre: ' + nombre + ' password: ' + passw);
});
app.listen('8000', function() {
console.log('server corriendo puerto 8000');
})
Je pense que c'est tout ce dont vous avez besoin mon ami.
Bonne chance!
Pouvez-vous vérifier la valeur de
req.body?Jose, regarde ma réponse. Je pense qu'il vous manque un body-parser dans votre code serveur