React配置proxy后fetch请求PHP接口仍报CORS错误如何解决

1. 先修复前端代理配置不生效的问题 #

• 你配置的package.json代理完全没触发，核心原因是fetch请求写死了带端口的完整绝对路径http://localhost:81/opencart/...，这种写法会直接绕过React开发服务器的代理规则，从localhost:3000直接发请求到localhost:81，必然触发跨域校验。
• 把fetch里的请求地址改成相对路径即可，修改后的代码如下：

useEffect(() => { 
    fetch("/opencart/index.php?route=api/create", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ items: [{ id: "xl-tshirt" }] }),
      })
      .then((res) => res.json())
      .then((data) => setClientSecret(data.clientSecret));
  }, []);

• 修改完成后必须重启React开发服务，proxy配置只有服务启动时才会加载，热更新不会生效。

2. 后端配置跨域头，处理OPTIONS预检请求 #

• 你当前的POST请求携带了Content-Type: application/json请求头，不属于浏览器判定的简单请求，正式发POST请求前会先发送一个OPTIONS方法的预检请求，只要后端没对这个预检请求返回合法的CORS响应头，就会报你看到的错误。
• 找到XAMPP中OpenCart对应API接口的入口文件，在所有业务逻辑、所有输出之前加入以下PHP代码：

<?php
// 允许跨域访问的源，本地开发填React服务地址即可
header("Access-Control-Allow-Origin: http://localhost:3000");
// 允许请求携带的头字段
header("Access-Control-Allow-Headers: Content-Type");
// 允许的请求方法
header("Access-Control-Allow-Methods: POST, OPTIONS");
// 拦截OPTIONS预检请求，直接返回200，不执行后续业务逻辑
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(200);
    exit;
}

// 下方保留你原本的PHP业务代码

• 如果加代码时提示headers already sent错误，说明这几行代码前面已经有输出（比如echo、空格、BOM头），把代码挪到文件最开头即可。

3. 常见避坑 #

• 不要按照控制台提示加mode: 'no-cors'配置，开启这个模式后你拿到的是不透明响应，根本无法读取返回的JSON内容，对接口请求来说完全没用。
• 如果后续需要在请求里带Cookie、或者加自定义请求头，需要对应在PHP的CORS配置里补充：新增Access-Control-Allow-Credentials: true头，同时在Access-Control-Allow-Headers里补上你新增的自定义头字段，前端fetch配置里加上credentials: 'include'。

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