Обработка ответа на запрос Post в React JS - PullRequest
Новая
       22

Обработка ответа на запрос Post в React JS

0 голосов
/ 28 августа 2018

Я новичок, чтобы реагировать, и я пытаюсь сделать запрос на публикацию и отобразить ответы. Это мой компонент поиска, где я делаю запрос на публикацию 

import React, { Component } from 'react';
import {FormGroup, ControlLabel, FormControl, HelpBlock, Button} from 'react-bootstrap';
import {fieldset} from 'purecss/build/pure.css';
import './layout.css';
import axios from 'axios';

export class Search extends React.Component{
state = {
    Movie :'',
}

handleChange = event =>{
    this.setState({Movie: event.target.value});
}


handleSubmit = event =>{
    event.preventDefault();

    const movie_name = {
        Movie: this.state.Movie
    };

    axios.post(`http://127.0.0.1:7002/get-suggestions`,{movie_name})
    .then(res =>{
        console.log(res);
        console.log(res.data);
    })
};

render(){
    return(
        <div id='layout'>
          <div className="pure-g">
            <div className="pure-u-12-24">
            <form className="pure-form" onSubmit={this.handleSubmit}>
              <fieldset>
              <legend >Enter Movie Name</legend>
                  <input type="text" placeholder="Movie" onChange={this.handleChange}/>
                  <button type="submit" class="pure-button pure-button-primary">Suggest</button>
              </fieldset>
            </form>
            </div>
          </div>
        </div>
    );
}}

Я могу успешно сделать запрос на публикацию, но не могу получить ответ на экран. Может кто-нибудь объяснить мне, почему ответ не был console.logged и ответом является список Error Message

Ответы [ 3 ]

0 голосов
/ 28 августа 2018

Эта проблема не о реакции, а о CORS (Обмен ресурсами между источниками).

Вы должны добавить соответствующие заголовки в свой бэкэнд API.

Access-Control-Allow-Origin и Access-Control-Allow-Methods не менее.

Это может выглядеть примерно так: 

// indicates that server allows cros-domain requests
//* - any origin to access the resource,
// <origin> - certain URI
setHeader('Access-Control-Allow-Origin', '<origin> or <*>')

// specifies allowed method/methods when accessing the resource
setHeader('Access-Control-Allow-Methods', 'POST')
0 голосов
/ 28 августа 2018

Как уже упоминалось, ваш сервер должен быть правильно настроен с помощью CORS.

Если вы не можете изменить код сервера, это расширение Chrome является хорошим временным исправлением.

0 голосов
/ 28 августа 2018

Ваш почтовый запрос в порядке, но в серверных запросах он заблокирован.

, поэтому вы должны разрешать запросы. 

res.setHeader('Access-Control-Allow-Origin', '*');

внести эти изменения в бэкэнд-код.

...