React修改用户密码接口遭遇CORS跨域拦截问题求助

一、先修正代码中的请求体与Content-Type不匹配问题 #

你当前代码里用了FormData却手动设置Content-Type: application/json，这会导致请求格式混乱，同时可能触发CORS预检失败：

// 错误写法
const formData = new FormData();
formData.append("password", formState.inputs.confirmNewPassword.value);
await sendRequest(
  process.env.REACT_APP_BACKEND_URL + `/users/${userId}/change-password`,
  "PATCH",
  formData,
  {
    Authorization: "Bearer " + auth.token,
    "Content-Type": "application/json", // 这里和FormData冲突
  }
);

改成JSON格式发送（适配后端期望JSON的情况）：

const requestBody = JSON.stringify({
  password: formState.inputs.confirmNewPassword.value
});
await sendRequest(
  process.env.REACT_APP_BACKEND_URL + `/users/${userId}/change-password`,
  "PATCH",
  requestBody,
  {
    Authorization: "Bearer " + auth.token,
    "Content-Type": "application/json",
  }
);

如果后端确实需要FormData，则移除手动设置的Content-Type，让浏览器自动添加正确的multipart/form-data头：

const formData = new FormData();
formData.append("password", formState.inputs.confirmNewPassword.value);
await sendRequest(
  process.env.REACT_APP_BACKEND_URL + `/users/${userId}/change-password`,
  "PATCH",
  formData,
  {
    Authorization: "Bearer " + auth.token,
    // 移除Content-Type设置
  }
);

二、确认后端对PATCH请求的OPTIONS预检响应 #

PATCH属于非简单请求，浏览器会先发送OPTIONS预检请求，后端必须正确返回以下响应头：

• Access-Control-Allow-Origin: 允许你的前端域名（生产环境不建议用*）
• Access-Control-Allow-Methods: 必须包含PATCH
• Access-Control-Allow-Headers: 必须包含Authorization（因为你请求里带了这个头）

即使其他接口正常，也要确认这个PATCH接口的OPTIONS处理逻辑是否和其他接口一致，比如是否遗漏了对PATCH方法的允许。

三、禁用mode: 'no-cors' #

这个模式会让浏览器强制屏蔽响应内容，同时限制请求头的设置，完全无法解决实际的CORS问题，只会让你无法获取请求结果，直接去掉这个配置。

内容的提问来源于stack exchange，提问作者V.T