React中axios发送POST请求仅获取到OPTIONS响应头如何解决

1. 修正异步请求写法 #

你当前混用了await和.then两种异步处理方式，导致最终拿到的返回值不是POST请求的真实响应，首先调整写法：

try {
  const response = await axios.post(
    process.env.REACT_APP_URL_API + "/login",
    {
      username: userRef.current.value,
      password: passwordRef.current.value,
    }
  )
  // 此处的response即为POST请求的响应，而非OPTIONS预检请求的响应
  console.log('POST响应头', response.headers)
  console.log('POST响应体数据', response.data)
} catch (err) {
  console.error('请求失败', err)
}

2. 配置后端CORS暴露自定义响应头 #

受浏览器CORS安全策略限制，默认情况下前端只能读取6个基础响应头：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。
如果你需要读取JWT、自定义凭证这类自定义响应头，需要后端在POST响应的头信息中添加Access-Control-Expose-Headers字段，将需要暴露给前端的头名称全部列出，示例：

Access-Control-Expose-Headers: Authorization, X-Custom-Credential
将示例中的头名称替换为你实际使用的自定义头名称即可。

3. 配置跨域凭证权限 #

如果你的接口需要跨域携带Cookie、或者读取跨域响应的凭证类头信息，需要给axios开启withCredentials配置：

• 单次请求配置示例：

const response = await axios.post(
  process.env.REACT_APP_URL_API + "/login",
  {
    username: userRef.current.value,
    password: passwordRef.current.value,
  },
  { withCredentials: true }
)

• 全局配置示例（所有请求都生效）：

axios.defaults.withCredentials = true

完成以上三步即可正常读取POST请求返回的响应头和响应体数据。

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