从Chrome/Edge复制的POST cURL在Postman中变为GET请求的原因排查

问题描述 #

我开发了一个后端基于SpringBoot、前端基于React的文件上传应用，应用本身运行正常，但从Chrome或Edge浏览器复制POST请求的cURL命令到Postman后，请求会自动转为GET请求，无法理解该现象。操作步骤如下：

• 在浏览器中触发文件上传的POST请求
• 从开发者工具中复制该请求的cURL命令
• 将cURL粘贴到Postman中，发现请求方法被自动改为GET

可复现代码 #

后端SpringBoot代码 #

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestPart;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

@RestController
@CrossOrigin
public class TestApi {
  @PostMapping("/uploadFile")
  public void uploadFile(@RequestPart MultipartFile multipartFile) {
      System.out.println(multipartFile.getName());
  }
}

前端React代码 #

import FormControl from '@mui/material/FormControl';  
import CssBaseline from '@mui/material/CssBaseline'; 
import Container from '@mui/material/Container';    
import Grid from '@mui/material/Grid';  
import React, { useState } from 'react';
import axios from 'axios';

function ManagementAuth() {  
   const [imageFile, setImageFile] = useState([]);    

   const fileSelectedHandler = (event) => {
      setImageFile(event.target.files[0]);
   }; 

const fileUploadHandler = (event) => {
    const fd = new FormData();
    fd.append('multipartFile', imageFile, imageFile.name);
    axios.post('http://localhost:8080/uploadFile', fd)
    .then(res => {
        console.log(res);
    });
}; 

return (
    <React.Fragment>
    <CssBaseline />
        <Container maxWidth="sm">
            <Grid
                container
                spacing={0}
                direction="column"
                alignItems="center"
                justifyContent="center"
                style={{ minHeight: '80vh' }}
                >        
                <FormControl sx={{ m: 1, width: '35ch' }} variant="standard"> 
                    <input type="file" onChange={fileSelectedHandler}/>
                    <button onClick={fileUploadHandler}>Upload</button>
                </FormControl>     
            </Grid> 
        </Container>
    </React.Fragment>
  );
}

export default ManagementAuth;

问题原因 #

这是因为浏览器生成的文件上传请求cURL包含--data-binary参数，Postman在解析这类multipart/form-data类型的cURL时，容易出现识别偏差：

• Postman对包含二进制文件数据的cURL解析逻辑不完善，无法正确识别原始请求的POST方法，默认 fallback 为GET
• 若cURL中包含Windows风格的文件路径等特殊格式，也会导致Postman解析失败，进而变更请求方法

解决办法 #

• 手动创建请求（推荐）：直接在Postman中新建POST请求，设置URL为http://localhost:8080/uploadFile，切换到Body选项卡选择form-data，添加键为multipartFile的项，类型选择File后上传对应文件
• 修正导入的cURL：粘贴cURL到Postman导入后，手动将请求方法改回POST，重新配置form-data的文件参数，确保格式匹配后端接口要求
• 优化cURL后导入：复制cURL时，检查并调整格式，比如将--data-binary相关内容替换为标准的表单格式，再导入Postman

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