如何在现有CakePHP非React项目中运行React开发模式？

1. 配置React开发服务器代理 #

在React项目的package.json中添加proxy字段，指向你的CakePHP后端服务地址，这样React开发服务器会自动转发API请求到CakePHP，自动携带session和CSRF相关cookie，解决跨域和令牌无效问题：

"proxy": "http://localhost:8765" // 替换为你的CakePHP服务运行端口

2. 在CakePHP模板中加载React开发环境脚本 #

无需每次构建React项目，直接在需要加载React组件的CakePHP模板里引入React开发服务器的实时脚本：

<!-- 挂载React组件的容器 -->
<div id="react-root"></div>

<!-- 引入React开发服务的脚本，端口对应React开发服务默认的3000，如有修改请同步调整 -->
<script type="text/javascript" src="http://localhost:3000/static/js/bundle.js"></script>
<script type="text/javascript" src="http://localhost:3000/static/js/vendors~main.chunk.js"></script>
<script type="text/javascript" src="http://localhost:3000/static/js/main.chunk.js"></script>

3. 处理CSRF令牌传递 #

如果你的API接口要求请求头携带CSRF令牌，可以通过两种方式获取：

• 从CakePHP模板注入全局变量：
  在CakePHP模板中输出CSRF令牌到全局window对象：

  <script>
  window.csrfToken = <?= json_encode($this->request->getParam('_csrfToken')) ?>;
  </script>
  

  然后在React代码中直接使用window.csrfToken设置请求头。

• 从Cookie读取：
  借助js-cookie库（或原生解析document.cookie）读取CakePHP设置的CSRF令牌cookie：

  import Cookies from 'js-cookie';
  
  const csrfToken = Cookies.get('csrfToken'); // 替换为CakePHP实际的cookie名称
  // 以axios为例配置全局请求头
  axios.defaults.headers.common['X-CSRF-Token'] = csrfToken;
  

4. 开发流程注意事项 #

• 同时启动CakePHP服务和React开发服务，确保两者端口不冲突
• React代码修改后，开发服务器会自动热重载，刷新CakePHP页面即可看到最新效果
• 生产环境仍保持原有流程：构建React项目后将build文件夹内的资源引入CakePHP

内容的提问来源于stack exchange，提问作者Fahad Bin Wahid