快速服务器 POST 方法和登录时获取未定义值的问题

Question

我正在学习如何为我正在开发的 chrome 扩展程序进行非常简单的登录，我从两个输入框中获取名称和密码，并使用快速 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

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

Answer 1

您需要在发送前将object转换为string ，

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

Answer 2

方法一：

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

Answer 3

您在这里省略了几件事：

1. 尝试从文件夹 URI 中删除斜杠。 试试这个： app.use(express.static(path.join(__dirname, 'CTRL')));

2. 最重要的是，
   一个。 npm install --save body-parser
   湾。 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');
})

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

祝你好运！