解决CORS时触发TypeError: formData.getHeaders不是函数问题求助

在Vue项目中尝试解决CORS跨域错误时，添加formData.getHeaders()设置axios请求头后，CORS警告消失，但出现TypeError: formData.getHeaders is not a function错误。相关代码及报错信息如下：

保存数据代码 #

saveToServer() {
  // Upload Code
  let formData: any = new FormData()
  formData.append(
    '0c42819f7026a5b7f407c011c0b9523dad249b9ceef29cddcc5140b6ab922867',
    ''
  )
  formData.append(
    'robot_file',
    new Blob([JSON.stringify(this.robot)]),
    `${this.taskName}.json`
  )
  formData.append(
    'robot_json',
    new Blob([this.robot.toRobot(0)]),
    `${this.taskName}.robot`
  )

  axios
    .post(
      'http://ideasolutions.co.kr/bpm/common/insertRpaProcessByDeviceList',
      formData,
      { headers: formData.getHeaders() }
    )
    .then((data: any) => {
      console.log('Upload End')
      console.log(data)
    })
}

修改尝试的代码片段 #

axios.post('', formData, {headers: formData.getHeaders()}, ...)

报错信息 #

[Vue warn]: Error in v-on handler: "TypeError: formData.getHeaders is not a function"

found in

---> <VBtn>
       <VAppBar>
         <ModelCanvas> at src/components/designer/ModelCanvas.vue
           <VApp>
             <App> at src/App.vue
               <Root>

TypeError: formData.getHeaders is not a function
    at VueComponent.ModelCanvas.saveToServer (ModelCanvas.vue?ba42:162)
    at click (ModelCanvas.vue?4f3d:93)
    at invokeWithErrorHandling (vue.runtime.esm.js?c320:3017)
    at VueComponent.invoker (vue.runtime.esm.js?c320:1815)
    at invokeWithErrorHandling (vue.runtime.esm.js?c320:3017)
    at VueComponent.Vue.$emit (vue.runtime.esm.js?c320:3716)
    at VueComponent.click (vuetify.js?ed19:2564)
    at invokeWithErrorHandling (vue.runtime.esm.js?c320:3017)
    at HTMLButtonElement.invoker (vue.runtime.esm.js?c320:1815)
    at HTMLButtonElement.original_1._wrapper (vue.runtime.esm.js?c320:7473)

解决方法 #

1. 错误原因：浏览器原生FormData对象根本没有getHeaders()这个方法，该方法一般是第三方封装库提供的，直接调用原生对象的该方法必然报错。

2. 修复请求代码：
   axios发送FormData时会自动识别并设置正确的Content-Type: multipart/form-data请求头，完全不需要手动调用getHeaders()。直接移除该配置即可：

   saveToServer() {
     let formData: any = new FormData()
     formData.append(
       '0c42819f7026a5b7f407c011c0b9523dad249b9ceef29cddcc5140b6ab922867',
       ''
     )
     formData.append(
       'robot_file',
       new Blob([JSON.stringify(this.robot)]),
       `${this.taskName}.json`
     )
     formData.append(
       'robot_json',
       new Blob([this.robot.toRobot(0)]),
       `${this.taskName}.robot`
     )
   
     axios
       .post(
         'http://ideasolutions.co.kr/bpm/common/insertRpaProcessByDeviceList',
         formData
       )
       .then((data: any) => {
         console.log('Upload End')
         console.log(data)
       })
   }
   

3. CORS问题的根本解决：
   如果移除配置后又出现CORS警告，说明问题不在前端请求头，必须由后端服务器配置CORS规则：

   • 在后端添加Access-Control-Allow-Origin响应头，指定允许访问的前端域名（生产环境不要用*）
   • 配置允许的请求方法（如POST）、请求头信息
   • 若涉及带凭证的请求，还需开启Access-Control-Allow-Credentials

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