0

Хочу сказать сразу, что если дублирую вопрос - с удовольствием ознакомлюсь с первоисточником, потому как не нашел ничего похожего.

Я столкнулся с проблемой когда создавал компонент формы.

import React, {Component} from 'react'
import axios from "axios";

export class FibForm extends Component {
constructor(props) {
    super(props);

    this.state = {
        numForRequest: "",
        result: ""
    };
}

getResult = () => {
    console.log('getting result');

    alert(JSON.stringify({num: this.state.numForRequest}));

    axios.post(
        'http://localhost:8080/getNum',
        JSON.stringify({num : this.state.numForRequest})
        )
    //.then(response => this.setState({result: response.data.number}))
};

onChange = (event) =>{
    this.setState({numForRequest: event.target.value})
};

render() {
    return (
        <div>
            <p><input type="text" className="N-input" value={this.state.numForRequest} onChange=      {this.onChange}/></p>
            <p><button className="Buttons" onClick={this.getResult}>Рассчитать</button></p>
            {/*<p>{this.state.result}</p>*/}
        </div>
    )
}
}

export default FibForm;

По задумке данные из текстового поля должны в Json формате пересылаться на node js api (express) Привожу выдержку кода routes:

const router = require('express').Router(),
fibonacci = require('fibonacci');

router.post('/', (request, response)=>{
    console.log(request.body);
    try {
        console.log(request.body);
        let body = JSON.parse(request.body);

        response.statusCode = 200;
        return response.send(fibonacci.iterate(number));
    }
    catch (e) {
        console.log(e.message)
        response.statusCode = 404;
        return response.send({message: e.messageerror})
    }
});

module.exports = router;

При отправке данных (Строка с alert) я вижу вполне нормальный Json:

Окно alert

Тело запроса выглядит нормально, однако я вижу "лишние" данные формы:

Инструменты разработчика

Самым странным образом выглядит то что я вижу на стороне сервера, прикладываю вид оъекта в отладчике:

Тело

Я пробовал писать отправку по документации, изначально так и было:

axios.post(
        'http://localhost:8080/getNum',
        {num : this.state.numForRequest}
        )

Но при таком способе записи посылается запрос OPTIONS вместо POST.

Прошу помочь в решении проблемы. Укажите, пожалуйста, на ошибки.

На случай, если это может оказаться важным, корневой скрипт node js:

const express = require('express'),
app = express(),
FibRoutes = require('./routes/index'),
bodyParser = require('body-parser');

const port = 8080;

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

app.use('/getNum', FibRoutes);

app.listen(port, ()=>{
    console.log(`Back server is listening on port ${port}.`)
});
4
  • 1
    Возможно для axios.post не нужен JSON, а просто объект ключ-значение.
    – user347472
    4 апр 2020 в 0:32
  • Возможно. я даже пробовал что-то подобное всеми вариантами синтаксиса, которые знал (потому что в документации не нашел - везде задается Json). Если у вас есть предположения по синтаксису, прошу подсказать 4 апр 2020 в 10:31
  • Сам я не использовал никогда этот модуль, но в интернете видел что его без JSON используют. Вообще в других модулях я никогда не видел, чтобы для работы требовался json, это слишком странно например если требуется один ключ и значение, будет лишний оверхэд на сериализацию/десериализацию.
    – user347472
    4 апр 2020 в 10:37
  • Выше в самом вопросе я описал, что вначале передавал просто пару значений. но в таком случае посылается OPTIONS запрос, а не POST. Если вы имели ввиду нечто другое, приведите ссылку или пример. прошу. 4 апр 2020 в 10:39

2 ответа 2

0

В документации axios есть такой текст:

Performing a POST request:

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

То есть то, что метод называется post, означает, что это запрос именно method="POST". И как видите там нет никакого JSON, там литерал объекта с ключами и значениями, которые при запросе станут post-данными.

Также предположу, что вы могли запутаться в аргументах. Там первым должен быть url в виде строки, а потом объект (без JSON). Возможно вы строку url внутрь объекта перемещаете либо теряете. И тогда модуль догадывается сам, что вы имели в виду и делает другой тип запроса. Но это только догадка.

2
  • Да, я читал это и я был бы рад, если бы все было именно так. Но выше я написал что при таком задании у меня генерируется OPTIONS запрос вместо POST. И решения этой проблемы я так и не нашел. Нужный запрос генерируется только если перевести объект в Json, но тогда начинается проблема описанная выше. 4 апр 2020 в 11:54
  • Попробуйте на домене сделать, возможно при локалхосте кроссдоменная политика вмешивается и пытается узнать можно ли слать данные и поэтому options.
    – user347472
    4 апр 2020 в 12:11
0

Проблема была именно в CORS политике. именно поэтому с виду успешный Options запрос, не получая нужных заголовков не давал перейти к POST. Решено добавлением этого кода, хотя наверняка есть более адекватные варианты решения.

router.options('/', (request, response) =>{
    response.header('Access-Control-Allow-Origin',['*']);
    response.header('Access-Control-Allow-Methods', 'GET,POST');
    response.header('Access-Control-Allow-Headers', '*');

    response.sendStatus(200);
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.