React应用向本地Apache服务器中PHP文件发送POST请求时出现CORS错误

看起来你遇到的CORS问题核心原因很明确：你在前端请求中错误地添加了Access-Control-Allow-Origin请求头，这个头是后端响应给前端的，不是前端发送给后端的。当浏览器发送预检OPTIONS请求时，后端的CORS配置没有允许这个请求头，所以就触发了你看到的错误。

问题分析 #

错误提示Reason: header ‘access-control-allow-origin’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response意思是：你的请求里包含了access-control-allow-origin这个头，但后端返回的Access-Control-Allow-Headers列表里没有允许这个头，所以预检请求失败。

另外你提到重新发送请求能成功，大概率是因为重新发送时浏览器直接发送了POST请求（跳过了预检），或者你无意识地移除了错误的请求头，但第一次请求的预检已经失败了。

解决方案 #

1. 修正Axios请求配置

移除请求头中的Access-Control-Allow-Origin: *，这个头属于后端响应头，不需要前端发送：

const options = {
  headers: {
    // 只保留Content-Type即可，不需要Access-Control-Allow-Origin
    "Content-Type": "application/json",
  }
};
axios.post("http://192.168.0.52:80/backend/backend.php", {
  ico: this.state.ico,
  name: this.state.name,
  searchFirm: true
}, options)
.then((response) => {
  // 处理你的响应逻辑
})
.catch((error) => {
  // 处理错误
});

2. 完善后端PHP的CORS配置

因为你发送的是application/json类型的POST请求，浏览器会先发送OPTIONS预检请求，所以后端需要显式处理OPTIONS请求，并配置允许的请求头：

<?php
// 先处理OPTIONS预检请求
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    // 允许前端发送的请求头，这里包含Content-Type
    header('Access-Control-Allow-Headers: Content-Type');
    // 允许的HTTP方法
    header('Access-Control-Allow-Methods: POST, OPTIONS');
    header('Access-Control-Allow-Origin: *');
    exit; // 处理完OPTIONS请求后直接退出，避免执行后续逻辑
}

// 处理正常的POST请求
header('Access-Control-Allow-Origin: *');
require_once "DbConnect.php";
echo "ahoj";
// 你的后续业务逻辑
...

额外说明 #

• Access-Control-Allow-Origin是后端用来指定允许哪些域名访问接口的响应头，前端不需要在请求中携带它。
• 当请求的Content-Type为application/json、PUT/DELETE方法，或者携带自定义请求头时，浏览器会自动发送OPTIONS预检请求，后端必须正确响应这个请求才能让后续的实际请求通过。

内容的提问来源于stack exchange，提问作者Tomáš Kretek