Reactjs POST 请求通过 fetch

Question

您好，我正在尝试通过 fetch 进行 reactjs POST 请求，但出现两个错误，我浏览了所有文档但错误未解决。

错误：

1. 无法加载 http://localhost:8083/students：预检响应包含无效的 HTTP 状态代码 403
2. 未捕获（承诺中）类型错误：无法获取

这是我的 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>


   );
 }


}

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

Answer 1

1-Response for preflight has invalid HTTP status code 403，表示需要在header中发送授权令牌（已注释掉）

2- Uncaught (in promise) TypeError: Failed to fetch 表示服务器未发送JSON 格式的响应，然后response.json() 抛出异常。

Answer 2

我可以看到你使用FormData，带有Content-Type 标头application/json 这是错误的。

var data = new FormData();

这里要提出的另一点是你不能像这样在FormData 中设置JSON。

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

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

或者，如果您想发送 JSON 数据，请创建适当的 JSON 有效负载并发送它而不是 FormData。应该可以的。

Answer 3

错误：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，在您的情况下可能会有所不同。