不确定我的代码发生了什么,但我正在尝试使用 axios 控制台进行测试运行并记录一些内容,但我收到了 404。
class SubscribeForm extends Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.emailChange = this.emailChange.bind(this);
this.emailSubmit = this.emailSubmit.bind(this);
}
emailChange(e) {
this.setState({value: e.target.value});
}
emailSubmit(e) {
e.preventDefault();
axios.post('/subscribe', {
email: 'someemail@email.com',
headers: {
'Content-Type': 'application/json;charset=UTF-8',
"Access-Control-Allow-Origin": "*",
}
}).then(res => {
if(res.data.success) {
this.setState({email: ''})
}
}).catch(error => {
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
console.log(error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
}
console.log(error.config);
});
}
render() {
const { classes } = this.props;
return (
<div className={classes.subFormSection}>
<p className={classes.formHelper}>
Join the club, enter your email address
</p>
<form method="post" className={classes.subFormWrap} onSubmit={this.emailSubmit}>
<TextField
value = {this.state.value}
onChange = {this.emailChange}
/>
<Button
className={classes.button}
type="submit"
>
Send
<Icon className={classes.rightIcon}>send</Icon>
</Button>
</form>
</div>
);
}
}
我尝试将标头添加到 axios 中以查看这是否是问题所在,但我认为不是(或者我可能做错了)。
另外,我没有 /subscribe 文件,我认为我不需要吗?因为,我在这里用 express 捕捉它:
const cors = require("cors");
app.use(cors());
app.post("/subscribe", (req, res, next) => {
console.log(req.body.email);
});
这个文件在我的服务器文件中,而react部分在客户端文件中。我设置了代理,所以当我运行服务器时,前端和后端正在相互交谈。
已更新 404 状态已转(待定)
我还在我的客户端文件夹中设置了代理中间件 setupProxy.js
const proxy = require("http-proxy-middleware");
module.exports = function(app) {
app.use(proxy("/subscribe", {
target: "http://localhost:5000"
}));
};
我在我的网络请求中进入请求标头/subscrib
:
Provisional headers are shown
这是否导致它(待定)?