React调用PHP form-data接口：Axios/Fetch失败但Postman正常

Axios调用的问题 #

• 错误添加了Access-Control-Allow-Origin请求头：这个头是服务器返回给浏览器的响应头，前端请求时不需要设置，手动添加会导致请求格式异常，触发ERR_HTTP2_PROTOCOL_ERROR。
• Axios会自动识别FormData并设置正确的Content-Type: multipart/form-data，不需要手动干预。

修正后的Axios代码：

const formData = new FormData()
formData.append('k', 'some string')
formData.append('id', 'some string')

try {
  const response = await axios.post('xxxx/yyyy.php', formData)
  console.log(response.data)
} catch (error) {
  console.error('请求失败:', error)
}

Fetch调用的问题 #

• 使用mode: 'no-cors'是关键错误：这个模式下，浏览器会限制前端读取响应内容，哪怕状态码是200，response.text()也会返回空。这个模式仅适用于不需要获取响应的场景（比如埋点上报），接口调用时必须去掉。
• 去掉mode: 'no-cors'后，需要确保后端PHP配置了正确的CORS响应头，允许你的前端域名跨域请求。

修正后的Fetch代码：

const formData = new FormData()
formData.append('k', 'some string')
formData.append('id', 'some string')

fetch('xxxx/yyyy.php', {
  method: 'POST',
  body: formData,
  cache: 'no-cache',
})
.then(async (res) => {
  if (!res.ok) throw new Error(`请求失败，状态码：${res.status}`)
  return res.text()
})
.then((text) => console.log('响应内容:', text))
.catch(error => console.error('请求出错:', error))

后端PHP补充说明 #

确保PHP接口正确处理FormData参数，同时配置CORS：

<?php
// 获取form-data参数
$k = $_POST['k'] ?? '';
$id = $_POST['id'] ?? '';

// 设置CORS响应头（开发环境可临时用*，生产环境指定前端域名）
header('Access-Control-Allow-Origin: *');
// 根据实际返回格式设置Content-Type
header('Content-Type: text/plain');

// 处理逻辑后返回内容
echo "接收参数：k=$k, id=$id";
?>

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