req.body пуст с запросом на выборку - PullRequest
Новая
       141

req.body пуст с запросом на выборку

0 голосов
/ 07 марта 2019

Я пытаюсь сделать запрос на выборку на мой сервер. но я продолжаю получать пустой req.body.

клиентский скрипт: 

  const form = document.getElementById('form1')

form.addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    const link = formData.get('link');
    var payload = {
        link
    };
    console.log(payload);

    const options = {
        method: "POST",
        body: JSON.stringify(payload),
        headers: {
            'content-type': 'application/json'
        }
    }
    console.log(options);

    fetch('/api/gtmetriks', options)
        .then(response => response.json()).then(result => console.log(result)).catch(err => console.log(err));
})

код сервера: 

const bodyParser = require('body-parser');
const cors = require('cors')
const app = express()
//cors
app.use(cors())

app.use(bodyParser.urlencoded({
    extended: true
}));
// parse application/json
app.use(bodyParser.json())
app.post('/api/gtmetriks', (req, res) => {       
    console.log(req.body);     
})

поэтому, когда я отправляю запрос, я попадаю в консоль '{}'. но нет ошибок в клиентском браузере.

1 Ответ

0 голосов
/ 07 марта 2019

Я думаю, что проблема в том, что вы используете CORS, но не указываете, какой URL для POST.Например, ваш клиент http://localhost:3000, а ваш сервер http://localhost:3001.Вы отправляете выборку на http://localhost:3000/api/gtmetriks вместо http://localhost:3001/api/gtmetriks.

Если вы измените выборку на: 

fetch('[YOUR SERVER URL]/api/gtmetriks', options)
  .then(response => response.json())
  .then(result => console.log(result))
  .catch(err => console.log(err));
})

Это должно работать.

РЕДАКТИРОВАТЬ # 1:

Этот код работал для меня с использованием внешнего интерфейса React (3000) и внутреннего интерфейса Express (3001):

Client app.js 

import React, { Component } from 'react';

export default class App extends Component {
  handleSubmit = () => {
    const payload = {
      link: 'http://tesla.com',
    };

    const options = {
      method: 'POST',
      body: JSON.stringify(payload),
      headers: {
        'content-type': 'application/json',
      },
    };

    fetch('http://localhost:3001/api/gtmetriks', options)
      .then(response => response.json())
      .then(result => console.log(result))
      .catch(err => console.log(err));
  };

  render() {
    return (
      <button
        onClick={() => {
          this.handleSubmit();
        }}>
        Click Me
      </button>
    );
  }
}

Сервер server.js

const express = require('express');
const logger = require('morgan');
const cors = require('cors');

const app = express();

//use cors to allow cross-origin resource sharing
app.use(
  cors()
);

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.post('/api/gtmetriks', (req, res) => {
  console.log(req.body);
  res.sendStatus(200);
});

//start your server on port 3001
app.listen(3001, () => {
  console.log('Server Listening on port 3001');
});
...