您好我正在尝试通过提取反应POST请求但得到两个错误,我查看了所有文档,但错误未解决。
错误:
这是我的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>
);
}
}
即使这里我的表单值也是硬编码的。
答案 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)
我可以看到您使用FormData
,Content-Type
标题application/json
错误。
var data = new FormData();
此处提出的另一点是,您无法在此JSON
内设置FormData
。
data.append("myjsonkey", JSON.stringify(payload));
首先,您需要发送什么样的有效负载。仅在需要将文件发送到服务器时才使用multipart
FormData
。如果您这样做,请确保从您的请求中删除 Content-Type
标题。
否则,如果要发送JSON数据,请创建正确的JSON有效负载并发送它而不是FormData
。这应该有用。