Reactjs POST请求通过提取

时间:2017-11-13 07:10:56

标签: javascript java reactjs rest fetch

您好我正在尝试通过提取反应POST请求但得到两个错误,我查看了所有文档,但错误未解决。

错误:

  1. 无法加载http://localhost:8083/students:预检的响应包含无效的HTTP状态代码403
  2. 未捕获(承诺)TypeError:无法获取
  3. 这是我的Reactjs代码:

    import React from 'react';
    import RaisedButton from 'material-ui/RaisedButton';
    import TextField from 'material-ui/TextField';
    import axios from 'axios';
    const style = {
     margin: 15,
    marginLeft: 600
    };
    export default class  Register extends React.Component {
     constructor(props) {
       super(props);
       this.onSubmit=this.handleSubmit.bind(this);
    }
    
    
    handleSubmit(e) {
       e.preventDefault();
       var self = this;
       var data = new FormData();
       const payload = {
       id: 111,
       studentName: 'param',
       age: 24,
       emailId: 2
    };
    data.append("myjsonkey", JSON.stringify(payload));
    
    fetch('http://localhost:8083/students',{
       method: 'POST',
       body: data,
       headers: {
        // 'Authorization': `bearer ${token}`,
        'Content-Type': 'application/json'
      }
     })
       .then(function(response) {
           return response.json()
         }).then(function(body) {
           console.log(body);
         });
     }
    
    render() {
       return (
         <form onSubmit={this.onSubmit}>
         <div style={style}>
         <TextField ref='id'
         hintText="Enter Student id"
         floatingLabelText="id"
         />
         <br/>
         <TextField ref='sname'
         hintText="Enter your Last Name"
         floatingLabelText="StudentName"
         />
         <br/>
         <TextField ref='age'
         hintText="Enter your Age"
         floatingLabelText="age"
         />
         <br/>
    
         <TextField ref='emailId'
         hintText="Enter your Email"
         floatingLabelText="emailId"
         />
         <br/>
         <br/>
         <input type="submit" />
    
    
         </div>
             </form>
    
    
       );
     }
    
    
    }
    

    即使这里我的表单值也是硬编码的。

3 个答案:

答案 0 :(得分:0)

错误:Response for preflight has invalid HTTP status code 403表示您无权将数据发布到服务器。此安全策略称为CORS(https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)。

您必须拥有API服务器。服务器必须允许来自localhost:8083的请求。

要允许此类请求,您可以向apache配置文件添加标头:

我在apache配置文件中使用以下配置:

 Header add Access-Control-Allow-Origin "http://localhost:8083"
    Header add Access-Control-Allow-Headers "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method,X-Requested-By, Access-Control-Request-Headers,withCredentials"
    Header add Access-Control-Allow-Methods "GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS"
   Header add Access-Control-Allow-Credentials 'true'

编辑:要添加打开您的apache配置文件并添加以上行:

<VirtualHost *:80>
    ......
    ......
    ......
    Header add Access-Control-Allow-Origin "http://localhost:8080"
    Header add Access-Control-Allow-Headers "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method,X-Requested-By, Access-Control-Request-Headers,withCredentials"
    Header add Access-Control-Allow-Methods "GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS"
   Header add Access-Control-Allow-Credentials 'true'
</VirtualHost>

配置文件的路径为:/etc/apache2/sites-available/000-default.conf,在您的情况下可能会有所不同。

答案 1 :(得分:0)

1- Response for preflight has invalid HTTP status code 403,表示您需要在标头中发送授权令牌(已将其注释掉)

2- Uncaught (in promise) TypeError: Failed to fetch表示服务器未发送JSON格式的重置,response.json()正在抛出异常。

答案 2 :(得分:0)

我可以看到您使用FormDataContent-Type标题application/json错误。

var data = new FormData();

此处提出的另一点是,您无法在此JSON内设置FormData

data.append("myjsonkey", JSON.stringify(payload));

首先,您需要发送什么样的有效负载。仅在需要将文件发送到服务器时才使用multipart FormData。如果您这样做,请确保从您的请求中删除 Content-Type标题。

否则,如果要发送JSON数据,请创建正确的JSON有效负载并发送它而不是FormData。这应该有用。