React+Node.js项目设置multipart/form-data时触发CORS跨域错误求助

1. 修复前端PUT请求封装逻辑 #

你当前的put封装中对入参data做了{ ...data }的对象包裹处理，如果传入的data是FormData类型，该展开操作会直接丢失FormData的所有内置属性，axios无法识别为文件上传请求，会将其序列化为普通JSON对象，导致请求格式完全错误。
修改代码如下：

export async function put(url, data, config = {}) {
  return axiosApi
    .put(url, data, { ...config })
    .then(response => response.data)
}

2. 删除手动设置的multipart/form-data请求头 #

手动设置Content-Type: multipart/form-data会丢失文件上传请求必须的boundary分隔符参数，该参数由axios自动生成，用于分隔formData内的不同字段，手动设置会直接导致后端无法正确解析请求体。
axios检测到请求体为FormData类型时，会自动补全正确的带boundary参数的Content-Type头，无需手动配置，修改接口调用代码如下：

export const updateProduct = data =>
  put(url.UPDATE_PRODUCT, data)

3. 修复后端CORS配置拼写错误 #

你的CORS配置中响应头Access-Control-Allow-Method拼写错误，正确头名为Access-Control-Allow-Methods（末尾缺少s），浏览器发起OPTIONS预检请求时无法识别该错误头，就会判定CORS校验不通过，抛出跨域错误。同时建议单独处理OPTIONS预检请求，避免后续业务中间件拦截预检请求。
修改后的后端CORS配置如下：

app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    // 处理预检请求直接返回成功状态
    if (req.method === 'OPTIONS') {
      return res.sendStatus(204)
    }
    next();
})

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