生产环境下react-admin请求出现CORS failed错误如何解决？

首先明确开发环境正常的原因：react start启动的开发服务器内置代理转发能力，所有接口请求会被开发服务中转，不会触发浏览器跨域校验，因此不会发起OPTIONS预检请求，也不会出现报错。生产环境直接返回静态打包资源，浏览器直接发起后端接口请求，触发跨域校验才出现问题。

错误根因 #

• OPTIONS预检请求被身份校验中间件拦截：浏览器发起跨域非简单请求前会先发送无身份凭证的OPTIONS预检请求，你在/user的OPTIONS路由上挂载了verifyAdmin身份校验中间件，导致预检请求被拦截，触发CORS FAILED错误。
• cors配置不满足react-admin要求：默认的cors()配置不会暴露Content-Range响应头，而react-admin需要读取该头实现分页逻辑，同时你在接口内重复设置跨域响应头也可能引发配置冲突。
• 生产环境接口地址配置错误：当前请求地址写死为http://localhost:3000，生产环境部署后，用户访问前端时请求会指向用户本地的3000端口，而非实际部署的后端服务，触发NS_ERROR_DOM_BAD_URI错误。

修复步骤 #

1. 调整全局cors配置 #

替换原有app.use(cors())代码，统一配置跨域规则，自动处理所有OPTIONS预检请求，无需单独编写OPTIONS路由：

app.use(cors({
  origin: '*',
  exposedHeaders: ['Content-Range'] // 配置暴露react-admin必需的Content-Range头
}))
// 直接删除你自行编写的app.options('/user', ...)整段代码，cors中间件会自动处理预检请求

2. 简化GET /user接口的响应头配置 #

已经在全局配置了跨域规则，无需在接口内重复设置跨域相关头，同时修正Content-Range的资源名：

app.get('/user', verifyAdmin, (req, res) => {
    readUsers().then((response) => {
        // Content-Range格式为：资源名 起始偏移-结束偏移/总数量，你之前写的posts和当前user接口不匹配，需要修正
        res.setHeader('Content-Range', `users 0-${response.length - 1}/${response.length}`);
        res.setHeader('Content-Type', 'application/json');
        res.end(JSON.stringify(response));
    });
})

3. 修改生产环境接口请求地址 #

将react-admin的dataProvider配置的接口根地址，从http://localhost:3000修改为后端实际部署的可访问地址（例如http://你的服务器IP:服务端口）。如果前端和后端在同域名下部署，也可以使用相对路径，彻底避免跨域问题。

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