Can't access body data from fetch PUT to express server

Question

I'm fairly new to web development and I'm trying to send some JSON data to a node.js server running express but I'm getting this error:

Failed to load http://localhost:8888/: Method PUT is not allowed by Access-Control-Allow-Methods in preflight response.

I have no idea what this means. This is the client-side fetch:

fetch('http://localhost:8888/', {
        method: 'PUT',
        body: JSON.stringify(this.exercises),
        headers: {
            'Content-Type': 'application/json'
        }
    }).then(res => res.json())
    .catch(err => console.error('Error: ' + err))
    .then(res => console.log('Success: ' + res));

And this is the server-side code:

app.put('/', (req, res, next) => {
    console.log('PUT request received');
    console.log(req.body);
});

The server doesn't even seem to receive the request. How do I make this work? Thanks in advance.

Your server is not responding with any data. so your client will be hanging there until it times out. try adding `res.send('');` just before your last console.log. — J-Cake, Jul 08 '18 at 12:26

dotnetdev4president · Accepted Answer · 2018-07-08T12:56:25.227

3

Make sure to use bodyParser (to get access to the data we have to use body-parser, it allows express to read the body). npm install --save body-parser

const bodyParser = require('body-parser');

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

Set up cors

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'
  );
  if (req.method === 'OPTIONS') {
    res.header('Access-Control-Allow-Methods', 'PUT, POST, PATCH, DELETE, GET');
    return res.status(200).json({});
  }
  next();
});

Make sure that you define the configurations beforedefining routes. Info about cors: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

edited Jul 08 '18 at 12:56

answered Jul 08 '18 at 12:24

dotnetdev4president

542
4
9

Now I'm getting this from the server: PUT request received undefined – Ben Lamb Jul 08 '18 at 12:37
Make sure that you define the configurations beforedefining routes. – dotnetdev4president Jul 08 '18 at 12:45
Yup, it's above all routes – Ben Lamb Jul 08 '18 at 12:47
Also do you use bodyparser? (I edited my post) if not take a look at here: https://stackoverflow.com/questions/38306569/what-does-body-parser-do-with-express – dotnetdev4president Jul 08 '18 at 12:47
There's no need to install `body-parser`. It's included by default in Express as of 4.16: https://github.com/expressjs/express/releases/tag/4.16.0 – Cisco Jul 08 '18 at 14:08
That did it, thanks. Does body-parser come with express or something because I didn't have to npm install it – Ben Lamb Jul 08 '18 at 14:10

Can't access body data from fetch PUT to express server

1 Answers1

Linked