React项目使用axios发送携带CSV文件的POST请求异常排查

已定位的代码缺陷 #

• 未拦截表单默认提交行为。<form>组件绑定onSubmit事件后，触发提交时浏览器会默认执行原生表单跳转/页面刷新逻辑，此时挂载的异步axios请求尚未完成，页面上下文被销毁，后续的日志语句根本无法执行。
• 手动配置Content-Type: multipart/form-data逻辑错误。文件上传的multipart请求需要携带浏览器自动生成的boundary参数来分割请求体结构，手动写死该请求头会直接丢失boundary标识，后端无法正确解析FormData内容，直接中断请求流程。
• 缺少异常捕获逻辑。使用async/await语法时，若axios请求抛出任意错误（网络异常、跨域拦截、后端报错、请求体格式不合法），未捕获的Promise异常会直接中断当前async函数的执行，后续的日志代码完全不会运行，且没有任何错误提示供排查。
• 缺少空值校验。若用户未选择文件就点击提交，selectedFile为初始值null，直接追加到FormData中会导致请求格式异常，触发后端报错。

修正后的可运行代码 #

import React, { Component } from 'react';
import axios from 'axios'

class SessionsUpdate extends Component {
  state = {
    selectedFile: null
  }

  handleSubmit = async (e) => {
    // 阻止浏览器默认表单提交行为
    e.preventDefault()
    // 校验是否已选择文件
    if (!this.state.selectedFile) {
      alert('请先选择需要上传的CSV文件')
      return
    }
    try {
      const formData = new FormData();
      formData.append('file', this.state.selectedFile);
      await axios.post(
        'https://localhost:8765/...', 
        formData,
        { 
          headers: { 
            // 仅携带自定义认证头即可，由浏览器自动生成完整的multipart请求头
            'x-observatory-auth': localStorage.getItem("token")
          } 
        }
      )
      console.log("log")
    } catch (error) {
      // 统一捕获请求全流程的错误，打印到控制台方便定位
      console.error('文件上传失败：', error)
    }
  }

  onFileChange = event => {
    this.setState({ selectedFile: event.target.files[0] });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div>
          <h1>Choose a file to store</h1>
        </div>
        <div>
          <fieldset>
            <input type="file" accept=".csv" onChange={this.onFileChange} />
          </fieldset>
        </div>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

export default SessionsUpdate;

补充说明：若修正后仍存在请求失败的情况，需检查后端CORS配置，确认允许的请求头列表包含自定义的x-observatory-auth字段，且前端服务地址在后端跨域白名单内——这也是Postman可正常调用、但浏览器端前端无法调用的常见原因。

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