跨域场景下React前端与PHP后端API的Cookie未存储问题排查

嘿，我来帮你搞定这个跨域Cookie的问题！你这种React前端+PHP后端跨域登录的场景，Cookie不生效的情况我碰到过好多次，核心就是跨域凭证的配置没到位，咱们一步步来解决：

一、后端PHP必须配置的核心响应头 #

跨域下Cookie要正常工作，后端的CORS和Cookie参数设置是关键，这几个点绝对不能错：

• Access-Control-Allow-Origin不能用通配符*：必须指定前端的具体域名（比如http://your-react-app.com），因为浏览器不允许带凭证的请求用通配符源。
• 必须开启Access-Control-Allow-Credentials: true：这个头是告诉浏览器，允许前端请求携带凭证（包括Cookie、HTTP认证信息等）。
• Cookie参数要配置正确：
  • Domain：如果前后端是同个父域名的子域名（比如前端app.example.com，后端api.example.com），设为.example.com就能让两边都访问到Cookie；如果是完全不同的顶级域名，Cookie的Domain只能设为后端域名（比如b.com），此时只有前端请求后端域名的接口时才会携带Cookie。
  • SameSite：跨域场景下必须设为None，而且要配合Secure参数（HTTPS环境下），不然现代浏览器会默认阻止跨域Cookie的发送。
  • Secure：HTTPS环境下建议开启，确保Cookie只在加密连接中传输。
  • HttpOnly：如果不需要前端JS操作Cookie，建议开启，提升安全性，不影响跨域携带。

给你个PHP的示例代码：

// 配置CORS响应头
header("Access-Control-Allow-Origin: http://your-react-frontend-domain.com");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");

// 处理浏览器的OPTIONS预检请求（非简单请求会先发这个）
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(204);
    exit();
}

// 设置登录Cookie
setcookie(
    'auth_token',
    'your-generated-token',
    [
        'expires' => time() + 3600 * 24 * 7, // 有效期7天
        'path' => '/',
        'domain' => '.your-shared-domain.com', // 根据实际域名调整
        'secure' => true, // HTTPS环境下启用
        'httponly' => true,
        'samesite' => 'None' // 跨域必须设为None
    ]
);

// 返回登录成功响应
echo json_encode(['status' => 'success', 'message' => '登录成功']);

二、前端React的请求配置 #

你已经设置了withCredentials: true，这个是对的，但要注意：

• 所有需要携带Cookie的请求（比如登录后的接口请求）都要保持这个配置，不能只在登录请求里加。
• 如果用Axios，全局配置会更方便：

import axios from 'axios';

// 全局开启携带凭证
axios.defaults.withCredentials = true;

// 登录请求示例
axios.post('http://your-php-backend-domain.com/api/login', {
    username: 'xxx',
    password: 'xxx'
})
.then(res => console.log(res.data))
.catch(err => console.error(err));

• 如果用原生XHR，确保每个请求都开启：

const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://your-php-backend-domain.com/api/login');
xhr.withCredentials = true;
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ username: 'xxx', password: 'xxx' }));

xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText));
    }
};

三、Nginx代理的额外配置（如果后端用Nginx） #

如果你的PHP后端是通过Nginx反向代理的，要确保Nginx没有修改或丢失必要的响应头，可以添加这些配置：

location /api {
    # 允许跨域凭证
    add_header Access-Control-Allow-Credentials true;
    # 指定前端域名，不能用*
    add_header Access-Control-Allow-Origin http://your-react-frontend-domain.com;
    # 允许的请求方法
    add_header Access-Control-Allow-Methods GET, POST, OPTIONS;
    # 允许的请求头
    add_header Access-Control-Allow-Headers Content-Type;

    # 处理OPTIONS预检请求，直接返回204
    if ($request_method = OPTIONS) {
        return 204;
    }

    # 转发到PHP-FPM（根据你的PHP配置调整）
    fastcgi_pass unix:/run/php/php7.4-fpm.sock;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    include fastcgi_params;
}

注意：Nginx的add_header指令在if块中可能会覆盖全局设置，要确保配置的一致性。

四、容易踩的坑点 #

• 别把Access-Control-Allow-Origin设为*：带Cookie的跨域请求绝对不允许用通配符，浏览器直接会拒绝。
• SameSite属性别忘设：现代浏览器默认是Lax，跨域请求会阻止Cookie发送，必须设为None+Secure（HTTPS环境）。
• Cookie的Domain别写错：如果前后域名不匹配，Cookie根本不会被前端浏览器保存或携带。
• 别忘了处理OPTIONS预检请求：浏览器发送非简单请求（比如POST带JSON格式）前会先发OPTIONS请求，后端必须正确响应，否则实际请求不会发送。

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