开发模式下在Drupal 9.4.x中嵌入React应用遭遇CORS错误求助

你遇到的CORS错误和Drupal的CORS配置无关——Drupal的cors.config是用来处理前端应用向Drupal后端发起API请求时的跨域，而当前场景是浏览器从https://drupalsite.ddev.site（Drupal域名）加载http://localhost:9000（React开发服务器）的静态资源，需要React开发服务器返回允许该源的CORS响应头。

因为你用的是Craco，需要在React项目的Craco配置中添加开发服务器的CORS设置：

1. 打开项目根目录的craco.config.js（如果没有则新建）
2. 添加devServer配置段，设置允许Drupal域名的CORS头：

module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': 'https://drupalsite.ddev.site',
      'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type'
    }
  }
};

如果需要临时允许所有本地开发源（方便测试），可以把Access-Control-Allow-Origin设为*，但生产环境不要这么做。

配置完成后，重启React开发服务器，浏览器就能正常加载脚本和样式了。

线上环境正常是因为构建后的React静态文件和Drupal部署在同域（或已配置服务器级别的CORS），不存在跨域加载的问题。

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