Can't post data to Google Cloud Run

Question

I have a really basic express service on Google Cloud Run, which is built and deployed to a container. It has access set to allow unauthenticated.

I am using fetch with React on the front end to send data to the server and receive the response.

On the server, I can't seem to get the data from the body of my request? Whatever settings I use for headers etc I can't get any data out of it.

I'm using fetch clientside to send the POST request:

const sendData = async() => {        
        const response = await fetch('https://my-service.run.app', {
            method: 'POST',
            mode: 'no-cors',
            body: { mydata: "some data"},
            json: true
          });
          return response;
    }

On the server, my service is super simple. All I want at the moment is to send json from the client to the cloud run server, log it, then send the same data back to the client as the response. However, the console log always gives me an empty object.

const express    = require('express');
const app        = express();
const bodyParser = require('body-parser');
const {Storage}   = require('@google-cloud/storage');
const cors = require('cors');

const corsOptions = {
    origin: true,
    mode: 'no-cors',
    optionsSuccessStatus: 200
};

const port = process.env.PORT || 8080;

app.use(bodyParser.json());

app.listen(port, () => {

  console.log('Listening on port', port);

});


app.post('/', async (req, res) => {

    try {

        const corsMiddleware = cors(corsOptions);

        return corsMiddleware(req, res, () => {
            const servicedata = req.body;
            console.log("MY DATA", servicedata )
            res.send(srcontext);
        });

    }

    catch (ex) {
        console.log(`Error: ${ex}`);
    }

})

Did you try with Curl? Did you validate that your service works correctly? — guillaume blaquiere, Mar 10 '21 at 19:58
Yeah the service works. I got 200 in the Network tab in Chrome and the logging in the Service confirms a 200 post request to the endpoint — Davtho1983, Mar 10 '21 at 20:09
So, the issue comes from your Front End which doesn't format the request correctly. And I'm sorry, I don't know!! — guillaume blaquiere, Mar 10 '21 at 20:44
No worries guillaume - as always I appreciate your help - I've given a detailed answer below that I hope addresses the exact reason why the Front End wasn't working :) — Davtho1983, Mar 11 '21 at 20:37

Puteri · Answer 1 · 2021-03-11T02:47:46.750

The problem is your first code. In the documentation of node-fetch it is mentioned that when making JSON POST you should add the header headers: { 'Content-Type': 'application/json' } which is not present in your code.

Then, your code should be something like this

const sendData = async() => {        
        const response = await fetch('https://my-service.run.app', {
            method: 'POST',
            mode: 'no-cors',
            body: JSON.stringify({ "mydata": "some data"}),
            headers: { 'Content-Type': 'application/json' }
            json: true
          });
          return response;
 }

The option json:true is only for parsing the response as json, but not the request.

EDIT

As @sebastian-simon suggested: ({ mydata: "some data" }) and ({ "mydata": "some data" }) are equivalent expressions and result in equivalent objects. If mydata is a string or symbol variable, then ({ [mydata]: "some data" }) would need to be used.

Can't post data to Google Cloud Run

1 Answers1