React项目jQuery跨域AJAX已配CORS仍报缺Access-Control-Allow-Origin错误怎么办

你遇到的CORS报错不是配置漏了，是前后端两边的写法都踩了实际生效的规则红线，逐点拆解：

前端代码的两处硬错误 #

• Access-Control-Allow-Origin 是服务端给浏览器返回的响应头标识，从来不是可以由前端在请求里手动携带的请求头。你在AJAX请求的headers里强行加了这个字段，直接让原本符合CORS简单请求规则的POST请求，变成了需要触发浏览器预检的非简单请求，直接触发了后续的预检校验流程，这也是为什么明明加了头反而报错的核心原因。
• jQuery的$.ajax方法根本不支持把成功回调作为第二个参数传入，它的回调必须写在配置对象的success属性中，你现在的回调写法本身就不会被正常执行，属于额外的代码bug。

后端代码的两处硬错误 #

• 你用了PHP短开标签<?，现在绝大多数PHP运行环境默认是关闭短标签支持的，这种写法会导致整个PHP文件根本不会被服务器解析执行，所有写在里面的header()方法都不会生效，自然不会给响应加上CORS相关头。
• 即便短标签能正常解析，你的后端代码完全没处理浏览器自动发的OPTIONS预检请求：因为前端请求被错误配置成了非简单请求，浏览器会先发起OPTIONS方法的预检请求，要求后端返回对应的CORS允许规则，你现在的代码在接收到OPTIONS请求时，既没有返回对应的头信息，也没有直接结束请求流程，自然会被浏览器判定为预检不通过。

修正方案 #

• 前端代码修正：删除headers里错误携带的Access-Control-Allow-Origin字段，修正回调写法，示例代码：

$.ajax({
  type: "POST",
  url : 'http://localhost/my-app/server/send.php',
  async: true,
  crossDomain: true,
  headers: {
    "accept": "application/json"
  },
  success: function(data) {
    alert(`${data}, success!`)
  }
})

• 后端代码修正：替换为完整的PHP开标签，增加预检请求处理逻辑，示例代码：

<?php
header("Access-Control-Allow-Origin: *");
// 直接拦截并处理OPTIONS预检请求
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
  header("Access-Control-Allow-Headers: Content-Type, accept");
  header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
  header("Access-Control-Max-Age: 86400");
  exit;
}
echo "...response...";

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