React Web应用proxy代理GET正常POST请求失效问题咨询

1. 前端submit函数逻辑错误 #

axios.post是异步操作，你在发起请求后立刻执行document.location.reload()，请求还没到达后端页面就已经刷新，POST请求直接被中断，这是最核心的故障原因。
修复代码：把页面刷新逻辑挪到请求成功的回调中，确保请求发送完成后再执行刷新：

submit = () => {
  console.log(this.state)
  axios.post(`/insert`, this.state)
    .then(() => { 
      alert('success post')
      document.location.reload()
    })
}

2. 后端/insert接口存在两处错误 #

• 错误使用this.state取值：后端路由回调的上下文里不存在this.state，你需要从前端传递的请求体req.body中读取参数
• 没有给前端返回响应：axios会等待后端返回响应结果，一直收不到响应会判定请求失败，你需要在接口逻辑执行完成后给前端返回响应
  修复后的后端代码：

app.post('/insert',(req,res)=>{
    console.log(req.body.setBookName);
    let options = {
      url: 'http://backend.default.svc.cluster.local',
      form: {
        setBookName: req.body.setBookName, 
        setReview: req.body.setReview
      }
  };
    request.post(options, (err) => {
      if(err) return res.status(500).send('error')
      res.send('success')
    });
})

3. 代理配置补充（可选，部分场景会导致POST失败） #

跨端口代理时建议加上changeOrigin: true配置，避免后端服务识别不到Host信息拦截请求：

const { createProxyMiddleware } = require('http-proxy-middleware');
     
module.exports = function(app) {
    app.use(createProxyMiddleware('/get', { target: "http://localhost:3001", changeOrigin: true }));
    app.use(createProxyMiddleware('/insert', { target: "http://localhost:3001", changeOrigin: true}));
};

内容的提问来源于stack exchange，提问作者Fainol