使用Fetch API替代Ajax实现带Allow-Credentials的POST请求

刚好做过类似的跨域会话管理需求，用jQuery的$.ajax()确实是最直接的方案，结合Access-Control-Allow-Credentials和POST方法，我给你整理了完整的前后端实现细节：

后端PHP服务配置（api.php） #

首先要在你的PHP接口里配置正确的CORS响应头，同时确保会话能正常初始化和保持。注意要处理OPTIONS预检请求（因为POST属于跨域复杂请求）：

<?php
// 处理OPTIONS预检请求，浏览器会先发送这个请求验证权限
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    header('Access-Control-Allow-Origin: http://localhost:3000');
    header('Access-Control-Allow-Methods: POST');
    header('Access-Control-Allow-Headers: Content-Type');
    header('Access-Control-Allow-Credentials: true');
    exit;
}

// 为常规POST请求设置CORS头
header('Access-Control-Allow-Origin: http://localhost:3000');
header('Access-Control-Allow-Credentials: true');

// 启动会话，必须在任何输出之前调用
session_start();

// 处理POST请求数据并操作会话变量
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 如果前端传的是JSON格式，用php://input接收
    $incomingData = json_decode(file_get_contents('php://input'), true);
    
    // 示例：保存会话变量
    if (isset($incomingData['username'])) {
        $_SESSION['username'] = $incomingData['username'];
    }
    
    // 返回当前会话状态
    echo json_encode([
        'success' => true,
        'currentSessionUser' => $_SESSION['username'] ?? '未登录'
    ]);
    exit;
}
?>

前端React中的$.ajax实现 #

在你的create-react-app项目里，封装AJAX方法时必须加上withCredentials配置，否则跨域时浏览器不会发送Cookie，PHP会话就无法保持：

UseAjax(incomingData) {
  return new Promise(function(resolve, reject) {
    $.ajax({
      url: 'http://example.com/api.php',
      type: 'POST',
      data: JSON.stringify(incomingData), // 序列化JSON数据
      contentType: 'application/json', // 告诉后端数据格式
      xhrFields: {
        withCredentials: true // 核心配置：允许携带跨域Cookie
      },
      crossDomain: true, // 显式声明跨域请求，新版本jQuery可省略，但加上更稳妥
      success: function(response) {
        resolve(response);
      },
      error: function(xhr, status, error) {
        reject({ statusCode: xhr.status, message: error });
      }
    });
  });
}

几个不能踩的坑 #

• Access-Control-Allow-Origin不能设为*：只要开启了Access-Control-Allow-Credentials: true，就必须指定具体的前端源（比如http://localhost:3000），否则浏览器会直接拒绝请求。
• session_start()必须放在最前面：PHP的会话初始化不能在任何HTML输出或者echo之后，否则会报错，会话也无法正常创建。
• 数据格式要匹配：如果前端用FormData传参，要去掉contentType配置（让jQuery自动设置multipart/form-data），后端改用$_POST接收数据。

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