如何使用Axios提交表单数据解决调用正常接口返回403错误问题

安全阿岳

2026-10-3

问题原因&修复方案

你遇到的403错误核心是手动指定了multipart/form-data请求头但缺少boundary分隔符参数，导致后端无法正确解析FormData，触发校验失败。
使用FormData作为请求体时不需要手动设置Content-Type，浏览器会自动生成携带正确boundary的请求头，修改代码如下：

const SendData = (event) => {
    event.preventDefault();
    let respuestasUSer = new FormData();
    respuestasUSer.set('curso', state.curso)
    respuestasUSer.set('nombre', state.nombre)
    respuestasUSer.set('q1', state.Pregunta1)
    respuestasUSer.set('q2', state.Pregunta2)
    respuestasUSer.set('q3', state.Pregunta3)
    respuestasUSer.set('q4', state.Pregunta4)
    respuestasUSer.set('q5', state.Pregunta5)
    respuestasUSer.set('q6', state.Pregunta6)
    respuestasUSer.set('q7', state.Pregunta7)
    respuestasUSer.set('q8', state.Pregunta8)
    axios({
        method: "post",
        url: "https://covid.cit0.com/guardar/encuesta/",
        data: respuestasUSer,
        // 移除手动配置的Content-Type，由浏览器自动生成
      })
        .then(function (response) {
          console.log(response);
        })
        .catch(function (response) {
          console.log(response);
        });   
}