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 you have read our privacy policy.

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