本地Node.js开发服务无法与XAMPP PHP服务维持会话问题咨询

开发阶段React服务运行在localhost:3000，XAMPP的PHP服务默认运行在localhost:80/localhost:8080，二者端口不同属于跨域请求场景：

• PHP会话依赖PHPSESSIDCookie识别用户身份
• 浏览器同源策略默认禁止跨域请求携带第三方Cookie，每次请求后端无法收到PHPSESSID，就会生成全新会话
• 打包后放到XAMPP目录运行时，前后端处于同一域名端口下，属于同域请求，Cookie可正常携带，会话因此正常。

方案1：配置React开发代理（推荐） #

React官方脚手架自带开发代理功能，可将所有API请求转发到后端服务，浏览器视角下所有请求都发往localhost:3000，不存在跨域问题，无需修改原有业务逻辑：

1. 安装代理依赖：
   npm install http-proxy-middleware --save-dev
2. 在React项目根目录（与package.json同级）新建setupProxy.js文件，写入如下配置：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api', // 替换为你的后端API统一前缀，所有匹配该前缀的请求都会被转发
    createProxyMiddleware({
      target: 'http://localhost', // 替换为你的XAMPP PHP服务实际地址
      changeOrigin: true,
    })
  );
};

3. 重启React开发服务，后续API请求直接写/api/xxx路径即可，无需携带后端域名端口，会话自动正常。

方案2：配置跨域Cookie支持 #

如果不想使用代理，可同时调整前后端配置，允许跨域携带Cookie：

前端配置 #

所有fetch请求都要添加credentials: 'include'参数，告知浏览器跨域请求需携带Cookie：

fetch('http://localhost/你的API路径', {
  credentials: 'include', // 必须添加该参数
  // 其他请求配置（method、body等）保持不变
})

后端PHP配置 #

在所有API接口的公共头部添加跨域配置：

// 允许React开发域名跨域访问，禁止写为通配符*
header('Access-Control-Allow-Origin: http://localhost:3000');
// 允许跨域携带Cookie
header('Access-Control-Allow-Credentials: true');
// 按需配置允许的请求方法和请求头
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type');
// 处理OPTIONS预检请求，直接返回200状态码
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
  exit(0);
}

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