React Project - запрос к серверу ExpressJS возвращает 400 - неверный запрос

Question

Параметры устанавливаются, и после нажатия кнопки выполняется запрос [пакет запроса узла] или запрос выборки для получения запроса expressjs. При создании адреса ссылки возвращается 400 неправильных запросов.

Я пробовал и запрос на выборку, и пакет узла 'request', и

Сервер JS

    const express = require ('express');
    const path = require('path') //core node module
    const app = express();
    const cors = require('cors');
    const router = express.Router();

    // app.use(cors())
    const publicdirpath = path.join(__dirname, '../public')
    console.log(path.join(__dirname, '../public'))

    app.use(cors());
    app.use(express.static(publicdirpath))

    app.post('/testcall', (req, res) => {
        if(!req.query.startdate && !req.body.enddate && 
    !req.body.projectnumber){
        return res.status(400).send({
            success: 'false',
            message: 'dates or project or both required'
        });
     }

     //call stored procedures
   });

    const port = process.env.PORT || 3000;
    app.listen(port, () => {
    console.log(`Server running on port ${port}`);
   });

JS Класс, который вызывает экспресс JS

    handleDropdownClick = (event, selection) =>{
        const { name, innerText, value } = event.target;
        console.log( event.target  + " : " + innerText + " : " + 
    this.props.formData);
        const request = require('request');
        switch(selection){
            case 1:
                //call api or stored procedure 
                if(this.validation()){
                    //call api
                 request.get({url:"http://localhost:3000/testcall", qs:this.state.formData} , function (err, res, body) {
                        if(err){
                            console.error('error with request: error: ' + err + '. res: ' + res +  ' + body: ' + body);
                        }
                        console.log("Get response: " + res.statusCode + ". Body: " + body);

                    })

                    //Using Fetch
                    const jsonData = JSON.stringify(this.state.formData);
                    fetch('/testcall', {
                        method: "POST",
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json',
                            'credentials': 'include'
                        },
                        body: jsonData
                    })
                    .then( response => { 
                        return response.json();
                    })
                    .then( response => {
                        console.log(response);
                    })
                    .catch(function (e) {
                        console.log("fail: " + e);
                    })
                }
                break;
    //more code

Package.json

    {
      "name": "app-name",
      "version": "0.1.0",
      "private": true,
      "main": "index.js",
      "dependencies": {
      "body-parser": "^1.19.0",
      "cors": "^2.8.5",
      "express": "^4.17.1",
      "nodemon": "^1.19.1",
      "react": "^16.8.6",
      "react-dom": "^16.8.6",
      "react-scripts": "3.0.1",
      "request": "^2.88.0",
      "save": "^2.4.0",
      "semantic-ui-react": "^0.87.2",
      "table": "^5.4.1",
      "tedious": "^6.2.0",
      "webpack": "^4.29.6"
     },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject",
      "dev": "run-p server start"
    },
    "eslintConfig": {
      "extends": "react-app"
    },`enter code here
    "browserslist": {
      "production": [
        ">0.2%",
        "not dead",
        "not op_mini all"
      ],
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ]
    }, 
    "proxy":"http://localhost:3000"
  }

index.js

    import React from 'react';  
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';


    ReactDOM.render(<App />, document.getElementById('root'));

    serviceWorker.unregister();

Путь к файлу

public
src
 -api
 -components
 -storedprocedures
 -tabs
 -app.js
 -config.js
 -index.js
 -server.js
package-lock.json
package.json

Ожидаемые результаты для экспресс-вызовов принять вызов и завершить логику.

Фактические результаты:

POST http://localhost:3000/calculatecommission 400 (неверный запрос) - для запроса пакета npm

request.js: 149 GET http://localhost:3000/calculatecommission?projectnumber=&startdate=2019-06-02&enddate=2019-06-28 400 (неверный запрос) - для запроса на получение

Answer 1

Я бы тоже порекомендовал использовать Axios, намного проще в использовании, чем выборка. Вы можете узнать больше здесь

https://alligator.io/react/axios-react/

Answer 2

К сожалению, получил такой же результат с axios.Мне интересно, если проблема в том, что экспресс-файл сервера настроен неправильно.Возможно это не получает запрос вообще.

Answer 3

Вы можете использовать axios или использовать прокси в интерфейсе