Javascript express server POST方法和fetch存在问题，登录时未定义值

我正在学习如何为我正在开发的chrome扩展创建一个非常简单的登录，我从两个输入框中获取一个名称和密码，并使用express POST方法将它们发送到服务器，但在打印它们时没有定义它们。代码如下：

server.js：

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

客户：

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

这是我在控制台中得到的：

服务器corriendo puerto 8000

名称：未定义密码：未定义

---

在发送之前，您需要将

对象

转换为

字符串

fetch（'http://localhost:8000/CTRL', {
模式：'no-cors'，
方法：“POST”，
body:JSON.stringify（{name:nombreSTR，passw:contrasenaSTR}），
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
}
});

在发送之前，您需要将

对象

转换为

字符串

fetch（'http://localhost:8000/CTRL', {
模式：'no-cors'，
方法：“POST”，
body:JSON.stringify（{name:nombreSTR，passw:contrasenaSTR}），
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
}
});

方法1：

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

方法2： //使用JQuery

$.post('http://localhost:8000/CTRL', {
        name: nombreSTR,
        passw: contrasenaSTR
    },
    function (data, status) {
        alert("Data: " + data + "\nStatus: " + status);
    });

方法1：

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

方法2： //使用JQuery

$.post('http://localhost:8000/CTRL', {
        name: nombreSTR,
        passw: contrasenaSTR
    },
    function (data, status) {
        alert("Data: " + data + "\nStatus: " + status);
    });

---

你在这里遗漏了几件事：

尝试从文件夹URI中删除斜杠。试试这个：

app.use（express.static（path.join（'CTRL'））

最重要的是，
a<代码>npm安装--保存正文解析器
b

var bodyParser=require（'body-parser'）

c

app.use（bodyParser.json（））

如果不导入

bodyParser

ExpressJS，它将无法解析请求的正文

这是完整的服务器代码示例，我认为它适合您

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

我想这就是你所需要的，我的朋友

---

祝你好运

您在这里遗漏了几件事：

尝试从文件夹URI中删除斜杠。试试这个：

app.use（express.static（path.join（'CTRL'））

最重要的是，
a<代码>npm安装--保存正文解析器
b

var bodyParser=require（'body-parser'）

c

app.use（bodyParser.json（））

如果不导入

bodyParser

ExpressJS，它将无法解析请求的正文

这是完整的服务器代码示例，我认为它适合您

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

我想这就是你所需要的，我的朋友

---

祝你好运

你能检查一下

req.body

的值吗？何塞，检查一下我的答案。我认为您的服务器编码中缺少body解析器。您可以检查

req.body

的值吗？Jose，检查我的答案。我认为您的服务器代码中缺少主体解析器