为什么前端从快速服务器接收空对象？

Question

Trying to figure out how to implement this request and response scenario with javascript's fetch() and an express server.

here's the server:

var express = require('express'),
    stripeConnect = require('./routes/connect'),
    cors = require('cors'),
    bodyParser = require('body-parser');

var app = express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.use(cors());

app.use(function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Credentials', 'true');
    next();
});

app.use('/connect', connect);

app.listen(process.env.PORT || 5000);

here's routes/connect:

const express = require('express');
const router = express.Router();
const admin = require('firebase-admin');
admin.initializeApp({
    credential: admin.credential.cert({
        projectId: process.env.projectId,
        clientEmail: process.env.clientEmail,
        privateKey: process.env.privateKey.replace(/\\n/g, '\n'),
        clientId: process.env.clientId
    }),
    databaseURL: process.env.databaseURL
});

const STRIPE_SK = 'sk_test_KEY';
const stripe = require('stripe')(STRIPE_SK);

// @route POST /stripeConnect/link
// @desc save stripe user account id to their firebase profile
// @access public
router.post('/link', (req, res) => {
    console.log('\nLINK-REQUEST-BODY => ');
    console.log(req.body);

    return admin
        .firestore()
        .collection('users')
        .doc(req.body.docId)
        .update({ stripeId: 'test_Id' })
        .then((success) => {
            console.log('Firestore Update: Success');
            res.json({ msg: 'Stripe account ID added to Slide profile.' });
        })
        .catch((err) => {
            console.log('Firestore Update: Fail, Error: ' + err.message);
            res.json({ msg });
        });
});

module.exports = router;

here's the fetch POST:

 function submit() {
   $("#progress-label").text("Working...")

   const request = {
     method: "POST",
     body: JSON.stringify({
       docId: $('#id').val(),
       stripeId: USER_ID
     }),
     mode: 'cors',
     headers: { 'Content-Type': 'application/json'}
   }
   fetch(SERVER_URL + "/link", request).then(res => {
     console.log("res => " + res)
     console.log("res.json() => "+ res.json())
     console.log("JSON.stringify(res.json()) => "+ JSON.stringify(res.json()))
     console.log("res.data => " + res.data)
     console.log("res.msg" => + res.msg
   }).catch(err => {
     document.getElementById("label").innerHTML = res.json()
   })
  }

The express server logs Firebase Update Success

the front end logs:

res => [object Response]
res.json() => [object Promise]
JSON.stringify(res.json()) => {}
res.data => undefined
res.msg => undefined

Just trying to figure out how to properly get this response from express. Not sure what all of these log-symptoms are telling me. just figured id log all the different ways I could think of handling the response object.

What do I need to do to get the response data?

Answer 1

Your .then() function is just a promise because your receiving it as soon as you get the headers from the request, you need to send the response back (res.send()) in the .then() of the res.json() because it is also a promise. so that modify your routes/connect as per below.

router.post('/link', (req, res) => {
    console.log('\nLINK-REQUEST-BODY => ');
    console.log(req.body);

    return admin
        .firestore()
        .collection('users')
        .doc(req.body.docId)
        .update({ stripeId: 'test_Id' })
        .then((success) => {
            console.log('Firestore Update: Success');
            res.json().then(data => ({
                data: data,
                status: response.status
            })
            ).then(res => {
            console.log(res.status, res.data)
            })
        .catch((err) => {
            console.log('Firestore Update: Fail, Error: ' + err.message);
            res.json({ msg });
        });
});