在React JS中处理发布请求的响应

Question

我是一个菜鸟，我想做出一个发布请求并显示响应。这是我发出发布请求的搜索组件

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>
    );
}}

我能够成功地发出发布请求，但无法显示响应，任何人都可以解释我为什么未在控制台中记录响应，并且响应是列表

Answer 1

您的发布请求似乎不错，但在后端请求被阻止了。

所以您必须允许请求。

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

在后端代码中进行这些更改。

Answer 2

此问题与反应无关，而与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')

Answer 3

正如其他人所提到的，应该使用CORS正确设置您的服务器。

如果您无法修改服务器代码，this Chrome extension是一个很好的临时解决方法。