不同IP下WordPress与React应用Cookie共享问题求助

1. 调整WordPress登录Cookie的核心属性 #

本地localhost属于同域名跨端口，浏览器对Cookie限制宽松，但生产环境是两个独立IP的跨域场景，必须强制设置Cookie的关键属性：

• Secure: 设为true，前端是HTTPS，只有标记Secure的Cookie才会被浏览器跨域传递
• SameSite: 设为None，跨域场景下必须配合Secure属性才能让Cookie跨域生效
• Domain: 由于是独立IP，无需设置Domain，留空让浏览器自动绑定WordPress服务器IP

在WordPress的主题functions.php或自定义插件中添加以下代码修改Cookie属性：

add_filter('wp_set_auth_cookie', function($auth_cookie, $expire, $user_id, $scheme, $token) {
    // 强制添加Secure属性
    if (strpos($auth_cookie, 'Secure;') === false) {
        $auth_cookie .= 'Secure;';
    }
    // 替换SameSite为None
    $auth_cookie = preg_replace('/SameSite=(Lax|Strict);/', 'SameSite=None;', $auth_cookie);
    return $auth_cookie;
}, 10, 5);

// 调整Cookie有效期，避免浏览器提前回收
add_filter('auth_cookie_expiration', function($expire) {
    return 86400 * 7; // 7天有效期
}, 10, 3);

2. 修正WP GraphQL CORS插件配置 #

即使生产环境配置和本地一致，也要确认以下关键项：

• Allowed Origins必须填前端完整地址：https://165.23.115.114（不要带末尾斜杠）
• 必须勾选Allow Credentials选项，这是跨域传递Cookie的核心开关
• Allowed Headers需包含Content-Type、Authorization等请求必需的头信息

3. 前端请求强制携带凭证 #

React发送GraphQL请求时，必须明确设置携带跨域凭证，否则浏览器会自动忽略Cookie：

• Axios示例:

axios.post('http://179.68.87.7/graphql', yourQuery, {
    withCredentials: true,
    headers: { 'Content-Type': 'application/json' }
});

• Fetch示例:

fetch('http://179.68.87.7/graphql', {
    method: 'POST',
    credentials: 'include',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(yourQuery)
});

4. 处理HTTP/HTTPS混合请求问题 #

你的WordPress是HTTP，前端是HTTPS，这会触发浏览器的混合内容拦截，直接导致Cookie无法传递。最优解决方案是给WordPress配置HTTPS；如果暂时无法升级，可尝试在前端关闭混合内容拦截，但该方法在现代浏览器中可能被阻止，且存在安全风险，不推荐长期使用。

5. 浏览器调试验证 #

用浏览器开发者工具确认以下几点：

• WordPress登录后，Application面板的Cookies中，wordpress_logged_in_* Cookie是否带有Secure和SameSite=None属性
• 前端发送请求时，Network面板的Request Headers是否包含Cookie字段
• Response Headers中Access-Control-Allow-Origin是否等于前端地址，Access-Control-Allow-Credentials是否为true

内容的提问来源于stack exchange，提问作者Saurav Singh kaurav